javascript - Javascript 中的文本突出显示

Question

我有以下格式的文本:

<div id="text">
  <div>Hello world</div>
  <div>How are you</div>
</div>

用户选择世界的“w”:

所以我得到了选择并可以插入跨度:

var selection = window.getSelection();
var startNode = $(selection.anchorNode.parentElement);
var endNode = $(selection.focusNode.parentElement);
var startIndex = startNode.index();
var endIndex = endNode.index();
var startOffset = selection.anchorOffset;
var endOffset = selection.focusOffset;

结果:

<div id="test">
  <div>Hello <span class="id1">w</span>orld</div>
  <div>How are you</div>
</div>

id1.startNode = 0
id1.endNode = 0
id1.startOffset = 6
id1.endOffset = 7

用户用户现在选择文本中的“d Ho”。它应该是这样的:

<div id="test">
  <div>Hello <span class="id1">w</span>orl<span class="id2">d</span></div>
  <div><span class="id2">Ho</span>w are you</div>
</div>

id2.startNode = 0
id2.endNode = 1
id2.startOffset = 9
id2.endOffset = 2

但是使用之前的方法 selection.anchorOffset 会产生相对于新创建的文本节点的索引，这些文本节点现在是“Hello”、“w”和“orld”，这意味着我得到了一个索引3 个而不是 10 个。

我使用以下代码来获取创建的偏移量:

var offs = 0;
if(startNode.context.innerHTML.length > startNode.context.innerText.length) {
    var n = startNode.context.childNodes;
    for (var i = 0; i < n.length; i++) {
        if(n[i].textContent === selection.anchorNode.textContent) {
            break;
        }
        else {
            offs += n[i].textContent.length;
        }
    }
}
console.log(offs);

我现在可以在开始和结束处添加偏移量，但是当选择越过不同节点或其中包含选择时，这种情况就会中断。我也不知道如何使用这些偏移生成跨度。还有很多情况我必须考虑，例如 startNode === endNode 或者选择是否完全或部分包含跨度。

对于这样的事情有什么通用的方法或框架吗？我宁愿只使用纯文本索引而不是内部的 html 标签，并让其他东西处理正确的格式。

Answer 1

冒着 self 推销的风险，我的Rangy图书馆有一个Class Applier module专门为此。