📅  最后修改于: 2023-12-03 15:16:15.731000             🧑  作者: Mango
在网页中的一些文字可能会被突出显示,例如搜索结果中匹配的关键词、页面中的错误信息等等。JavaScript可以帮助我们获取这些突出显示的文本,以便我们进一步对其进行处理或展示。
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
即可。
以上是获取突出显示文本的两种方法,如果您在开发中遇到类似的需求,可以参考上述代码进行实现。