mark.js markRanges不尊重HTML元素

问题描述

我正在使用mark.js的markRanges()方法来突出显示具有起始位置和长度的范围，但是，它不尊重诸如换行符之类的HTML元素。文档指出，必须指定起始位置，包括空格字符。

例如，以下HTML：

<div contenteditable="true" id="text">hi.<br><br>I'm quite well.<br></div>

在标记以15开头和5长度的范围时：

var elem = document.getElementById('text');
var instance = new Mark(elem);
var options = {
  "element": "mark"
};
instance.markRanges([{
  start: 15,length: 5
}],options);

应突出显示单词“ 非常”，但是，它将突出显示我们“ ll ”的世界的最后两个字母，作为markRanges（）方法没有计算两个<br>行换行符的字符。

我的小提琴https://jsfiddle.net/93swuqa6/

解决方法

这不是错误。相反，他们所说的空格并不意味着 <br> 标签和 <p> 标签。标签不算作空格。相反，它们表示实际的文本空格、换行符、空格和制表符，即使它们不是由浏览器呈现的。

以你的例子为例，稍微调整一下：

<div contenteditable="true" id="text">hi.
   I'm quite well.<br>

“hi”之间有一个换行符（ASCII 字符 13 或 10）和几个空格（ASCII 字符 32）。和“我是”。浏览器不会显示大部分空格，而只会显示一个空格。即便如此，“quite”现在仍处于第 15 位，因此会以黄色突出显示。

javascript mark.js