javascript - 如何在不使用标签包装的情况下突出显示 HTML 文本？

Question

是否可以在不使用<span>任何其他标签包装的情况下突出显示 HTML 文档中的文本？

例如，在 HTML 代码中，<p>The quick fox</p>我想突出显示quick但没有在其周围添加 DOM 元素。将 DOM 元素添加到父元素是可以的。

谢谢！

score 9 · Accepted Answer

不，这是不可能的。

你不能告诉浏览器在不改变 DOM 的情况下以不同的方式呈现一段文本，无论你是静态地还是动态地（例如，使用 Javascript，作为后处理步骤）。

score 3 · Accepted Answer

如果您使用具有透明重复背景图像或透明背景颜色（使用 rgba 或 hsla）的绝对定位元素并将其放置在选定区域上，则可能。

另一种方法是有一个绝对定位的画布元素，没有背景，占据整个浏览器视口并在选择上绘制一个透明矩形。

score 0 · Accepted Answer

这是不可能的。

如果您只想在原始源代码中没有标签，则可以稍后使用 Javascript 魔术添加标签。你可以做类似的事情

<p highlight="quick">The quick fox</p>

并编写一个 JQuery/Prototype/plain JS 函数来动态突出显示它，但是为什么？如果你详细说明一下，有人可能会想出一个主意。

score 0 · Accepted Answer

比我想象的要做到这一点的唯一方法是使用该<canvas>元素，并完全手动渲染所有内容。

4 回答 4