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

Question

I have an HTML document that contains a bunch of anchors, which have text and a href link. Here is an example of what they look like:

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

I would like to write a piece of vanilla JS or jQuery code (whichever runs faster) that will highlight keywords (or the whole line, if possible) within the anchors when the page is opened/loaded.

For example, if an anchor contains the word "some", then that word (or preferably the whole line) will be highlighted on page load without me having to use any onclick buttons.

I've spent a few hours trying to do this by looking at other similar question on SO and Google, but they seem to only work if the element has a class or id, and I haven't been able to figure out how to do this with anchors. Any help is appreciated.

Welcome to Stackoverflow. Please take the [tour](https://stackoverflow.com/tour) (and get a badge). Your question lacks any attempt at solving this problem on your own. The idea is for you to try to get something to work and then come here with specific problems you are unable to resolve. Taking the tour and reading about [How to ask a good question](https://stackoverflow.com/help/how-to-ask) in the help center will provide all the information you need. — Randy Casburn, Jun 23 '19 at 17:31
With that said, to address this: _only work if the element has a class or id_ - you could put a class or id on your anchors or use a CSS [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) to help select the anchor tags. — Randy Casburn, Jun 23 '19 at 17:33
@RandyCasburn Hi thanks for the comment. I guess I was unclear; I did look through SO and found some JS code (for example: https://stackoverflow.com/questions/38588721/highlight-a-text-with-javascript-everytime-page-loads), and tried to modify it for anchors but couldn't figure out how. Regarding your second comment, how can I put a class/id onto all of my anchors? Sorry, I'm new to programming. — George Orwell, Jun 23 '19 at 17:38
Are you saying you cannot edit the HTML? (to change the anchors) — Randy Casburn, Jun 23 '19 at 17:39
@RandyCasburn I can, but the anchors get automatically updated everyday using python, and theres too many to manually edit everyday. Do you know a fast way to add class/id to every anchor? — George Orwell, Jun 23 '19 at 17:40
no "fast way" to do anything of value. What changes with the anchors everyday? Does the `href` attribute change? and is that the ONLY attribute on the anchor tags? Finally, are you suggesting that the anchors get ZERO styling of any kind? — Randy Casburn, Jun 23 '19 at 17:43
Hmmm..."F22Raptor" - where are you - maybe I'll just come over and do it for you :-) — Randy Casburn, Jun 23 '19 at 17:46
@RandyCasburn All anchors get deleted, and new ones (along with some old ones) get rewritten onto the HTML. Each anchor has a different href, and that is the only attribute. Yes, the anchors have no styling whatsoever. Each anchor looks exactly like what I pasted onto the question, except of course a different link and text. — George Orwell, Jun 23 '19 at 17:46
You cannot achieve your goal give the parameters provided in these comments. — Randy Casburn, Jun 23 '19 at 17:46
@RandyCasburn Actually, I was just looking through some questions about how to modify anchor tags, and thought of a possible solution: is it possible to instead just replace all anchor tags with an h1 tag that also has a class? — George Orwell, Jun 23 '19 at 17:55

score 1 · Accepted Answer · edited Jun 24 '19 at 08:02

Can be achieved by looping through every element that you want to assign this attribute to and doing a string comparison on it's value.

Just get these links and add css class to those of them which contains the specific text by executing the highlightLinkContainingText function.

See example: 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");

score 1 · Answer 2 · answered Jun 23 '19 at 19:32

Change "searchWord" to the text you want to highlight.

<!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>

Thanks for the reply! This also works great, but the other answer highlighted the whole code. I will upvote your answer as well once I reach 15 points. — George Orwell, Jun 24 '19 at 17:31

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

2 Answers2