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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

search - 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.

question from:https://stackoverflow.com/questions/65877034/get-all-text-from-all-elements-replace-certain-predetermined-words-javascript

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:22:22+0000

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>

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags