Javascript 使用html源确定要突出显示的可见字符

我使用TinyMCE让用户编辑和格式化文本，输出是html代码。 html然后被发送到服务器，并被推送到其他客户端，这些客户端可以跟踪网页的编辑进度，html被插入到div中，这样用户可以看到格式，但无法编辑

现在，我希望光标位置和用户在编辑器中所做的任何选择在只读页面上显示，如果选中，则使用highlightbackground color，或者在字符之间插入一个带黑色边框的空白跨距来模拟光标位置

我试图使用 editor.tinymce.selection.getRng 这给了我用户看到的内容的开始和结束位置。格式化字符不被计算在内 然后，我遍历DOM并计算每个文本元素中的字符数，这些字符用一个突出显示范围覆盖所选的字符。这导致了混乱的代码，但在我在textblock中找到一个非ascii或编码字符之前工作得相当好

示例html

<p>abc&nbsp;<b>de</b>fg</p>

在用户看来是这样的

abcdefg

假设用户选择的字符c到d包括c、空白、粗体标记的前半部分和d， tinymce将返回范围开始：2结束：5 但是后面的实际字符是开始：5结束：16。 仅将文本从char 5包装到高亮显示范围内的char 16将导致糟糕的html。 检查以&开头、以结尾的单词；增加职位数量将导致混乱。必须有一个更简单的方法

如何计算一组html字符将变成多少可见字符

或者你可以用另一种方式来解决这个问题

谢谢

PS 1

---

我研究了各种jquery突出显示插件，但它们似乎是基于搜索字符串突出显示的。如果用户选择一个字符并且该字符存在多次，则这些字符将不起作用。然后，它们将突出显示所有出现的字符。

我在我的库中解决了这个问题：用户看到的文本本身存在问题。听起来你需要Rangy的Range对象的selectCharacters和toCharacterRange方法。

谢谢，我实际上看过这个库，但错过了这个textrange模块，谢谢你指出并创建了它：