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

Question

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

现在我希望光标位置和用户在编辑器中进行的任何选择都显示在只读页面上，如果选中使用高亮显示（背景颜色），或者插入一个空字符，字符之间有黑色边框以模仿光标位置。

我尝试过使用 editor.tinymce（）。selection.getRng（） 它给了我用户看到的开始和结束位置（不计算格式字符） 然后我遍历DOM并计算每个文本元素中的字符，这些元素包含使用高亮跨度选择的字符。这导致代码混乱但工作得很好，直到我在文本块中遇到非ascii或编码字符。

示例html

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

对用户来说是这样的

ABC 德 FG

假设用户选择了字符c到d（选择包括c，空格，粗体标记的前半部分和d）， tinymce将返回范围开始：2结束：5 但背后的实际角色将是开始：5结束：16。 只是在高亮范围内将文本从char 5包装到16将导致错误的html。 检查以＆amp;开头的单词结束于;并增加一些职位将变成一团糟。必须有一个更简单的方法

如何计算一组html字符会变成多少“可见”字符？

或许你会以另一种方式攻击这个问题

由于

PS 1 我已经查看了各种jquery高亮插件，但它们似乎基于搜索字符串突出显示。如果用户选择一个字符且该字符存在多次，则它们不起作用，然后它们将突出显示所有出现的情况。

Answer 1

我已在Rangy库中解决了这个问题：TextRange module关注用户看到的文字。听起来你需要Rangy的Range对象的selectCharacters()和toCharacterRange()方法。