网页高亮的工具,不知道怎么才能实现,求大佬帮忙

功能建议 · 795 次浏览
欲成仙 创建于 2023-07-30 21:01

我在谷歌应用商店看到个高亮的工具,感觉很好用,但不知道quicker怎么才能实现,求大佬帮忙看看。正常来说,这个也能满足一般需求,但想要跟其他动作联动就比较难实现,希望能在quicker实现。链接:https://chrome.google.com/webstore/detail/%E5%B7%A5%E5%85%B7%E7%AE%B1/dgjmnmfeecbilbomkakgckijljlnkofl


回复内容
CL 2023-07-30 21:51
#1

需要一些前端知识,写js脚本实现功能,然后使用 https://getquicker.net/kc/help/doc/chromecontrol 浏览器控制模块对当前标签页运行。


运营:秋风 2023-08-03 09:26
#2

可以了。
https://getquicker.net/SubProgram?id=c67d7a07-7a58-4d24-ea04-08db92f9f222

欲成仙 回复 运营:秋风 2023-08-03 11:17 :

感谢啦

运营:秋风 2023-08-03 09:56
#3

如果你想在网页中的一段文本中指定部分文本设置高亮,你可以使用 HTML 中的 <mark> 元素来实现。

以下是一个示例代码,演示了如何通过 JavaScript 和 XPath 选择特定的文本,并将其包含在 <mark> 元素中来设置高亮:

javascriptCopy Code
// 使用 XPath 选择包含指定文本的元素 var xpathExpression = "//*[contains(text(), '要高亮的文本')]"; var result = document.evaluate(xpathExpression, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i < result.snapshotLength; i++) { var element = result.snapshotItem(i); // 创建并插入 <mark> 元素,将选定文本包裹在其中 var markElement = document.createElement("mark"); var textNode = document.createTextNode(element.textContent); markElement.appendChild(textNode); // 替换原有的文本节点为 <mark> 元素 element.parentNode.replaceChild(markElement, element); }

在上述代码中,我们首先使用 XPath 表达式 //*[contains(text(), '要高亮的文本')] 来选择所有包含指定文本的元素。然后,通过 document.evaluate() 函数执行 XPath 查询,并将结果存储在 result 变量中。

接下来,我们遍历 result.snapshotLength,对于每个满足条件的元素,我们执行以下操作:

  1. 创建一个 <mark> 元素和一个文本节点,用于包裹选定的文本。
  2. 将文本节点添加到 <mark> 元素中。
  3. 使用 parentNode.replaceChild() 方法将原有的文本节点替换为 <mark> 元素。

这样,指定部分文本将会被包裹在 <mark> 元素中,从而实现了高亮效果。

需要注意的是,以上代码只会对满足条件的第一级元素进行修改。如果你希望在更深层次的元素中进行高亮设置,你可能需要相应地调整 XPath 表达式。

希望以上代码对你有所帮助。如果你还有其他问题,请随时提问。

欲成仙 回复 运营:秋风 2023-08-03 11:17 :

好滴,谢谢大佬!

回复主贴