选择 HTMLElement 的特定文本

Question

在关于该方法的官方文档中，Selection.addRange()当我有特定范围时，我可以选择元素，但我不知道如何获取作为文本一部分的特定单词/目标的范围

例子：

<p>Hello world</p>

我想添加范围选择，world就像我用鼠标光标手动标记它一样。

另外：如何选择特定文本并根据某些正则表达式规则对其进行标记？

到目前为止，我找不到关于 SO 的答案。官方 Mozilla 文档addRange()：https ://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

Answer 1

它完全适用于您的示例。该函数从给定的 Element 节点检索 Text 节点，因此请注意，如果给定的元素包含 Element 子元素（而不是直接文本内容），您必须根据需要调整该函数。const el = document.getElementById('my-text-element');selectWord(el, 'world');function selectWord(element, word){&nbsp; const textNode = element.childNodes[0]; //retrieve the Text node from the Element node&nbsp; const selection = window.getSelection(); //get the Selection object&nbsp; const range = document.createRange(); //create the Range object&nbsp; const text = textNode.textContent; //retrieve the [string] from Text object&nbsp; const startPosition = text.search(word); //now we look for the word in the [string] value&nbsp; if(startPosition === -1) return; //if the word does not exist return and do nothing&nbsp; const endPosition = startPosition + word.length; //we need start and end position to select the found word&nbsp; range.setStart(textNode, startPosition); //it takes the Text node within we want to select some text, and we pass the starting character&nbsp; range.setEnd(textNode, endPosition); //we pass the ending character in the same Text node&nbsp; selection.addRange(range); //pass our prepared Range object and select the text}<p id="my-text-element">hello world</p>

Answer 2

要选择元素的特定部分，该部分应该有自己的标签，然后您可以在 javascript 中选择<p>Hello&nbsp;<span&nbsp;id&nbsp;=&nbsp;"xxx">world</span></p>