javascript - 如何获取选择之前、内部和之后的 HTML(不在 textarea 中)？

Question

这是我想要完成的:当用户使用鼠标、键盘或触摸选择“myDiv”中的文本时，我想获取三个谨慎的 HTML block :选择之前的 HTML(“左侧” ")、选择内的 HTML 和选择后的 HTML(在它的“右侧”)。 html 应该与 myDiv.innerHTML 中显示的一样。

选择可能在标记对内开始或结束(即，孤立的选择不一定是有效的 HTML)。我不需要处理特殊情况，例如选择中的绝对定位元素；我关心的所有选择都将被限制在一个 div 中，该 div 将包含基本标签，如 strong、em、ul、ol、h1、image 和 table。

我最接近的是使用 rangy获取选择并调用 selection.getRangeAt(0).cloneContents() 获取选择 HTML。在我做出孤立无效的选择并且浏览器更改文档片段的 HTML 以使其成为有效标记之前，这工作得很好。

额外信息:这就是我需要这个的原因:

我正在创建一个文档反馈系统，所以我需要将选择信息保存到数据库中，以便以后检索和重构。通常我会使用 DOM 路径和所选文本保存选择，但文本可能会在保存和重构之间发生变化。例如，作者可能会移动整个段落、删除部分等。这样 DOM 路径就变得毫无用处了。

所以我的(不完美的)计划是将选择存储为 [offset, length, html_snippet]。这就是“立场”。我还将存储所选文本前后直接出现的 html 片段。这就是“上下文”。

使用这些数据的组合，我应该能够在大多数情况下重新定位最初选择的文本，即使它已经移动或部分更改。当失败时，UI 将有办法解决它，但我希望这种情况尽可能少发生。

super 感谢!

Answer 1

我有几个问题:

1.- 当您说“选择之后的 html”时 - 该 html 与选择之前的 html 有何不同，反之亦然？ “选择”过程本身是否由于您的“脚本”或其他原因而篡改了 html？

2.- 你说文本选择没有发生在文本区域中......那么你正在使用什么元素？段落？ div...？缩小范围会有所帮助。

3.- 您是否考虑过使用 jquery？

http://api.jquery.com/select/

做类似的事情

$('#element_with_text_goes_here').select(function() {

//apply grabbing functions here, for example

//copy html 'before' selection:
     $pre_html = $('html').clone();

   // copy selection...see below:

   // copy html 'after' selection'...same as before


});

复制选择:

如这里所述:

Selecting text in an element (akin to highlighting with your mouse)

Jason 编写了以下函数:

function selectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    

    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) { // moz, opera, webkit
        var selection = window.getSelection();            
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

可在此处找到现场演示: http://jsfiddle.net/edelman/KcX6A/339/

这里还有一个 jquery 插件版本: http://jsfiddle.net/edelman/KcX6A/340/

可用于获取所选文本。你只需要相应地调整它，因为他是从相反的 Angular 接近它的。您可以向我们提供的详细信息越多...我们可以提供的帮助就越大。

希望对你有帮助
G