时间戳

首页 > 解决方案 > mark.js markRanges() 不尊重 HTML 元素

javascript - 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);

单词“相当”应该被突出显示，然而，它将突出显示世界的最后两个字母“我们” ，因为markRanges () 方法不计算两个进行中的<br>换行元素的字符。

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

标签： javascriptmark.js

解决方案

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

举个例子，稍微调整一下：

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

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

推荐阅读