mark.js markRanges()不尊重HTML元素

Question

我使用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/

Answer 1

这不是虫子。相反，所谓空白，并不是指<br>标记和<p>标记。标签不算作空格。相反，它们意味着实际的文本空白、换行符、空格和制表符，即使浏览器没有呈现它。

以你的例子为例，稍微修改一下：

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

在“hi”之间有一个换行符(ASCII字符13或10)和几个空格(ASCII字符32)。还有“我是”。浏览器不会显示其中的大部分空间，而是只显示一个空格。即使如此，“相当”现在已经排在第15位，所以会用黄色突出显示。