📌  相关文章
📜  javascript 获取突出显示的文本 - Javascript (1)

📅  最后修改于: 2023-12-03 15:16:15.731000             🧑  作者: Mango

JavaScript 获取突出显示的文本

在网页中的一些文字可能会被突出显示,例如搜索结果中匹配的关键词、页面中的错误信息等等。JavaScript可以帮助我们获取这些突出显示的文本,以便我们进一步对其进行处理或展示。

使用 window.getSelection()

window.getSelection()是一个非常常用的方法,它可以获取用户在当前页面中选择的文本。如果页面中有突出显示的文本,我们可以利用这个方法进行获取。

const highlightedText = window.getSelection().toString();
console.log(highlightedText);

上面的代码会将用户当前选中的文本打印到控制台中。

获取特定元素中的突出显示文本

上述方法只能获取用户选中的文本,如果我们想获取特定元素中的突出显示文本,则需要做一些额外的处理。我们可以遍历该元素的所有子节点,判断其中是否有突出显示的文本。

function getHighlightedText(element) {
  let highlightedText = '';
  const nodes = element.childNodes;
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    if (node.nodeType === Node.TEXT_NODE && node.parentElement.style.backgroundColor === 'yellow') {
      highlightedText += node.textContent;
    }
  }
  return highlightedText;
}

const element = document.getElementById('myElement');
console.log(getHighlightedText(element));

上面的代码中,我们定义了一个名为getHighlightedText的函数,它接收一个参数element表示要获取突出显示文本的元素。该函数会遍历该元素的所有子节点,如果子节点是文本节点并且它的父元素背景颜色为黄色,则说明该文本节点被突出显示了,我们将其文本内容累加到highlightedText中。最后返回highlightedText即可。

结语

以上是获取突出显示文本的两种方法,如果您在开发中遇到类似的需求,可以参考上述代码进行实现。