在 html 标签（HTML、JavaScript、ReactJS）之间突出显示答案

【问题标题】：Highlighting in between html tags ( HTML, JavaScript, ReactJS)在 html 标签（HTML、JavaScript、ReactJS）之间突出显示
【发布时间】：2019-03-26 10:08:49
【问题描述】：

我的程序中有一个 API 调用，结果是一个 HTML 文档。我必须将 API 结果中的 HTML 代码显示到我的浏览器中。我还从 API 中获取了两个整数值（例如 start_point 和 end_point）。我的要求是突出显示 HTML 文档中的文本。文本从 start_point 值突出显示到 end_point 值。假设以下 HTML 代码来自我的 API

<section>
    <p>Lorem ipsum dolor init </p>
    <p>Lorem ipsum dolor init </p>
      <div>
        <p>Lorem ipsum dolor init </p>
        <p>Lorem ipsum dolor init </p>
      </div>
    <p>Lorem ipsum dolor init </p>
    <p>Lorem ipsum dolor init </p>
  </section>

现在考虑 start_point = 16 和 end_point = 32。

所以根据我的要求，由于start_point是16，end_point是32，所以计数从

标签的“ 标签中。所以上面的 html 会在我的浏览器中显示，有点像这样：

Lorem ipsum dolor init

Lorem ipsum dolor 初始化

但现在考虑start_point在某个标签的中间而end_point在同一个标签的关闭之后的情况。

例如，考虑 starting_point = 30 和 end_point = 50。所以我的 HTML 高亮应该是这样的：

Lorem ipsum dolor init

Lorem ipsum dolor init

Lorem ipsum dolor 初始化

Lorem ipsum dolor init

有什么方法可以实现吗？

目前我正在使用这样的 JavaScript 代码：


html.slice(0, start_point) + `<span id="highlightText">` + html.slice(start_point + 25, end_point) +`</span>` + html.slice(end_point);

这里占用 25 个空间，这就是我在第二个切片中添加 25 的原因。然后为这个 id 为“highlightText”的跨度赋予背景颜色。由于我必须关闭容器标签内的跨度标签，所以它不起作用。我不想使用 jQuery，所以请建议纯 JavaScript 答案。

【问题讨论】：

我认为您不应该在这里计算 html 标签，因为您要突出显示渲染 DOM 上的文本。
那我该如何实现呢？我有 HTML 文档形式的值。我将如何计算文本以添加从 start_point 到 end_point 的背景颜色？

标签： javascript html reactjs

【解决方案1】：

我终于找到了解决办法。 MarkJS 帮助我实现了我真正需要的东西。即使它跨越 HTML 标签，它也会处理文本的突出显示。完美解决我的问题。

【讨论】：