CODEWITHSUNDEEP
javascriptsearchtextreplacefind
DennisWPaulsenJR
DennisWPaulsenJR

Reputation: 483

get all text from all elements, replace certain predetermined words, javascript only

I am trying to retrieve all the text on a document or webpage when a User loads the page, I am trying to search all the text for certain words, defined by a [name value] array, I am trying to replace each instance of the searched for words with the corresponding value.

example

I am using a chrome extension to inject My js upon page load...

<document>
       <head>web page</head>
          <body>
             <p>paragraph of text. stack overflow is wonderful</p>
             <p>another paragraph of text. stack overflow is great</p>
             <p>third paragraph with nested list
                 <ol>
                    <li>stack overflow yay</li>
                    <li>stack overflow wow</li>
                 </ol>
                 <img alt"stack is fun"></img>
             </p>
           </body>

the word stack appears many times in many context and tags. I would like search the entire document using the name value pair [stack : snack, wonderful : excellent], and then replace the original word with the new value. the page should refresh with the new words in place of the old, so every instance of stack should now say snack, every instance of wonderful should now say excellent.

Upvotes: 0

Views: 123

Answers (1)

Francisco
Francisco

Reputation: 228

You can simply replace the body innerHTML with a global flag in regex (g).

In the snippet i created an array of objects with a name and value where name is going to be the target and the value is the replacement of name. I loop through array and do a regex with a global flag on document.body.innerHTML to replace all matching ocurrencies.

Just like so.

const words = [
  {
    "targetValues": ["stack", "sack", "stck"],
    "value": "snack"
  },
  {
    "targetValues": ["wonderful"],
    "value": "amazing"
  }
];

words.forEach(word => {
    word.targetValues.forEach(target => {
    console.log(target);
    let reg = new RegExp(target, "gi");
    document.body.innerHTML = document.body.innerHTML.replace(reg, word.value);
  })
})
<p>paragraph of text. sTacK overflow is wonderFul</p>
<p>another paragraph of text. stack overflow is great</p>
<p>third paragraph with nested list
  <ol>
    <li>stack overflow yay</li>
    <li>stack overflow wow</li>
  </ol>
  <img alt="stack is fun" />
  sack
</p>
<p>sack misspelled</p>
<p>stck misspelled again</p>
<p>sTcK misspelled again and with some capital characters</p>

More information about RegExp can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

EDIT:

If you want instead of passing one value in name you can pass an array of values, so you had to loop through the names array and get each value to be replaced with the value; Also, Yes you can do it by specifying the case insensitive flag using regex (i).

Take a look at the snippet code, i have made an update.

Also for further information i would advise you to see this link: https://javascript.info/regexp-introduction (this also explains regex flags)

Upvotes: 1

Related Questions