如何突出顯示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文本而不用標籤包裝它？

回答

相關問題