Question

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

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

我想编写一段普通的JS或jQuery代码（以运行速度更快的形式），以在打开/加载页面时在锚点内突出显示关键字（或整行，如果可能的话）。

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

我花了几个小时尝试通过在SO和Google上查看其他类似的问题来做到这一点，但是它们似乎仅在元素具有类或id的情况下才起作用，而且我无法弄清楚如何用锚点做到这一点。任何帮助表示赞赏。

Answer 1

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

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

请参阅示例： 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>

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

2 个答案: