如果包含关键字，如何突出显示锚点中的文本？

Question

我有一个 HTML 文档，其中包含一堆锚点，其中包含文本和 href link。这是它们的外观示例：

<a href="URL_GOES_HERE"> Some Clickable Text Goes Here </a>

我想写一段 vanilla JS 或 jQuery 代码（以运行速度更快的为准），当页面为 opened/loaded.

例如，如果锚点包含单词 "some"，那么该单词（或最好是整行）将在页面加载时突出显示，而无需使用任何 onclick 按钮。

我花了几个小时试图通过查看关于 SO 和 Google 的其他类似问题来做到这一点，但它们似乎只有在元素具有 class 或 id 时才有效，而且我一直无法弄清楚如何使用锚点来做到这一点。感谢任何帮助。

Answer 1

可以通过遍历要为其分配此属性的每个元素并对它的值进行字符串比较来实现。

只需获取这些链接，然后通过执行 highlightLinkContainingText 函数将 css class 添加到包含特定文本的链接中。

参见示例： https://jsbin.com/zunefutoca/1/edit?html,js,output

const links = document.getElementsByTagName("a");

function highlightLinkContainingText(text) {
  for (const link of links) {
    if (link.innerText.includes(text)) {
      link.classList.add("highlight");
    }
  }
}

highlightLinkContainingText("Some");

Answer 2

将 "searchWord" 更改为要突出显示的文本。

<!DOCTYPE html>
<html>
    <head>
        <style>
        
        </style>
    </head>
    <body>


        <p>Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit.
             Vestibulum <a href="#">some</a> posuere ullamcorper <a href="#">enim</a>, consectetur iaculis 
             risus <a href="#">some ultrices</a> non.

        </p>

        <script>
        
        var searchWord = "some";

        for(var i of document.querySelectorAll("a")){
            if(i.innerText.indexOf(searchWord) !==  -1){
                i.style.backgroundColor = "#FFFF00";
                i.style.color = "#000000";
            }
        }
        
        </script>
    </body>
</html>

如果包含关键字，如何突出显示锚点中的文本？

How to highlight text in an anchor if it contains a keyword?

html

javascript

anchor

jquery

href