Question

我的文字格式如下：

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

用户选择＆＃34; w＆＃34;世界：

所以我得到了选择，可以插入范围：

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

用户用户现在选择＆＃34; d Ho＆＃34;的文字。这就是它应该是这样的：

<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之前的方法产生了相对于新创建的文本节点的索引，这些节点现在是＆＃34; Hello＆＃34;，＆＃34; w＆＃34;和＆＃34; orld＆＃34;这意味着我的索引为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

冒着自我宣传的风险，我的Rangy图书馆专门为此Class Applier module。

在Javascript中突出显示文本

1 个答案: