Javascript/jQuery 子串高亮问题

Question

我正在使用 Javascript 来计算在我的页面上选择的子字符串的偏移量和长度。这会存储在某个地方，稍后，当我将鼠标悬停在文本上时，我想使用 jQuery 中的偏移量和长度突出显示其中的某些单词。这是用于突出显示的基本代码:

content = $("#reader").html();
newContent = content.substring(0,offset)+'<font style="color: red;">'+content.substring(offset,offset+length)+'</font>'+content.substring(offset+length,content.length);
content = $("#reader").html(newContent);

现在我的问题是:偏移量和长度是根据屏幕上显示的内容计算的。然而，实际的 HTML 代码也可能包含

或其他标签。因此，我突出显示的文本会“移动”，具体取决于存在的 HTML 代码量。

解决这个问题最简单的方法是什么？

Answer 1

这不容易解决。你不应该在文本上计算偏移量和长度，但如果你想在之后处理 HTML，那么在 HTML 上计算。但是，将 HTML 标记插入到现有 HTML 字符串的某处可能会导致无效嵌套。最后，如果您将节点作为 HTML 代码重新插入，您将丢失状态，例如附加的事件处理程序。