Как выделить текст в привязке, если он содержит ключевое слово? - PullRequest
Новая
       16

Как выделить текст в привязке, если он содержит ключевое слово?

1 голос
/ 23 июня 2019

У меня есть HTML-документ, который содержит несколько якорей, которые имеют текст и ссылку href. Вот пример того, как они выглядят:

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

Я хотел бы написать фрагмент ванильного кода JS или jQuery (в зависимости от того, что выполняется быстрее), который будет выделять ключевые слова (или всю строку, если это возможно) внутри якорей при открытии / загрузке страницы.

Например, если якорь содержит слово «некоторые», то это слово (или, предпочтительно, вся строка) будет подсвечено при загрузке страницы, и мне не понадобятся какие-либо кнопки для нажатия.

Я потратил несколько часов, пытаясь сделать это, рассматривая другие подобные вопросы в SO и Google, но они, кажется, работают, только если у элемента есть класс или идентификатор, и я не смог выяснить, как это сделать с помощью якорей. Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 23 июня 2019

Измените 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>
1 голос
/ 23 июня 2019

Это может быть достигнуто циклом через каждый элемент, которому вы хотите присвоить этот атрибут, и выполнением сравнения строк по его значению.

Просто получите эти ссылки и добавьте класс css к тем из них, который содержит определенныйтекст с помощью функции highlightLinkContainingText.

См. пример: 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");
...