0

I've been trying to search for a word and add a span to it in order to give it some styling and functionality, and I've found a method of doing this, but it isn't very effective.

I have a content script that is searching for the word searching and then I replace the innerHTML with an added span to the keyword.

This is my JS file:

function getText(){
return document.body.innerText
}
if(getText().indexOf("searching") > -1) {
  document.body.innerHTML = document.body.innerHTML.replace(new RegExp("searching", "g"),"<span class='spanDetected' id='spanDetected'>"+
    'searching'+"</span>");
  console.log("true");
}

And this is what the outcome is:

So it seems to work on some level, but then the problem arises that it also changes URLS and Textboxes, like so:

What is a better way of styling and adding functionality to a word?

Community
  • 1
  • 1
Katie
  • 741
  • 1
  • 9
  • 30

1 Answers1

1

Using Regex to parse [X]HTML is a terrible idea. Imagine the following HTML:

<div id="searching">A searching inspection</div>

Your program would replace both instances of the phrase 'searching', which is not what you want. You need to parse the page and replace the nodes intelligently. Perhaps ignore hyperlinks or use an overlay div for the hyperlink nodes

You have two options:

  1. Traverse through all nodes recursively.

  2. Use XPath to select the nodes that contain a specific text.

Something like this can get you all the nodes that contain the phrase 'searching'.

//text()[contains(., 'searching')]

Then you can loop through all the nodes and replace the one you want. Since you are developing a Chrome extension you can use $x to get the array of nodes that meet your XPath conditions:

$x("//text()[contains(., 'searching')]")

Read this answer to learn how you can loop through the items in the array.

Community
  • 1
  • 1
bman
  • 5,016
  • 4
  • 36
  • 69
  • Well my ultimate goal is to search through 10,000+ words in as quick a time as possible, so I'm not sure which method would be the most effective.. – Katie May 02 '15 at 02:03
  • Regex is faster, but it does *NOT* work no matter how hard you try. X[HTML] is not the kind of text that you can approach with a regular expression for these kinds of parsing. – bman May 02 '15 at 02:06
  • Thanks for the edit. I've never actually used xpath so how would I implement it into looking inside of the `innerHTML` to see if it contains a word? – Katie May 02 '15 at 02:14
  • Hmm, these stuff (at least $(x) seems to be only usable in the chrome console, not code in the extension/webpage. Can you post more links to documentation about text()? – Zig Mandel May 02 '15 at 03:55