如何突出显示HTML文本而不用标签包装它？

是否可以突出显示HTML文档中的文本，而无需使用<span>或任何其他标记包装该文本？如何突出显示HTML文本而不用标签包装它？

例如，在HTML代码<p>The quick fox</p>中，我想突出显示quick，但不在其周围添加DOM元素。添加一个DOM元素到父元素是好的。

谢谢！

2009-11-29 Sleepster

为什么你想这样做？ – DOK 2009-11-29 18:33:29

我想突出显示（使用边界框）多个搜索项目。但是，想象下面的2个搜索项目：“快速”和“快速狐狸”。如果我通过包装它来突出显示“The quick”，它将成为一个单独的TEXT节点，并且很难找到“快速狐狸”。我想到的一种技术是： 1.临时添加元素。 2.找到元素的边界框（使用偏移量（），宽度，高度）。 3.删除上述元素。 4.将上述尺寸的方框添加到容器中。如果文本没有缠绕，可能会工作... – Sleepster 2009-11-29 19:09:07

不，这是不可能的。

无论您是静态还是动态地（使用Javascript，例如，作为后处理步骤），您都无法告诉浏览器以不同的方式呈现一段文本，而无需固有地更改DOM。

来源

2009-11-29 18:30:49

如果您在透明画布叠加层中更改像素，则不需要更改DOM。 – 2009-11-29 21:34:49

如何在不更改DOM的情况下获得一段文本的绝对位置？ – 2009-11-29 22:25:59

将元素添加到DOM，找出其位置，然后删除它并标准化（）。 – Sleepster 2009-11-30 13:29:15

这是不可能的。

如果您只是想在原始源代码中没有标签，稍后可能会使用Javascript魔术添加标签。你可以这样做

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

，写一个jQuery /原型/纯JS功能来突出它的飞行，但对于什么，为什么？如果你细说一下，有人可能会想出一个想法。

来源

2009-11-29 18:34:08

做到这一点的唯一方法比我想象的要使用<canvas>元素，并且手工完成所有的事情。

来源

2009-11-29 18:52:28

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

另一种方法是使用绝对定位的canvas元素，而不需要占用整个浏览器视口的背景，并在选区上绘制透明矩形。

来源

2009-11-29 21:33:48

如何在不改变DOM的情况下获得一段文本的绝对位置？ – 2009-11-29 22:21:13

将元素添加到DOM，找出其位置，然后删除它并标准化（）。 – Sleepster 2009-11-30 00:04:02

如何突出显示HTML文本而不用标签包装它？

回答

相关问题