Replace words in the body text

Question

Is there a way to replace the normal text within a table element that is placed within the body of the HTML   Like replacing  hello  with  hi    Please only use JavaScript without jQuery

User · Answer

Wanted to add an example to funky-future's answer as I kept getting this error:

Uncaught TypeError: element.childNodes is not iterable

use like this:

replaceInText(document.body,"search term","replacement");

it didn't work for me with jQuery selectors.

User · Answer

While using innerHTML replace will work and is pretty fast  this will break the DOM state  You can replicate this by setting  quot autofocus quot  on an input field and then changing innerHTML on body  it will loose focus  A less destructive approach is     retrives all childNodes of body var childNodes   document body childNodes      start replacing replaceInNodes childNodes  quot search quot   quot replace quot     function replaceInNodes nodes search replace          iterate through all nodes     for  var i   0  i  lt  nodes length  i                   var curNode   nodes i                  if the node has attributes  let us look at those                i E  we want to change  quot John quot  in the input placeholder to  quot Peter quot  -  lt input type  quot text quot  value  quot John quot  gt              if curNode attributes     undefined                   var curNodeAttributes   curNode attributes                  for  var ii   0  ii  lt  curNodeAttributes length  ii                             replace attribute values                     curNodeAttributes ii  nodeValue   curNodeAttributes ii  nodeValue replace search  replace                                                     It is a  quot TEXT NODE quot                 i E   lt span gt John lt  span gt              if curNode nodeType    3                   curNode data   this injectIntoString curNode data                                It is a  quot ELEMENT NODE quot   meaning we need to go deeper             if curNode nodeType    1                   this replaceInNodes curNode childNodes                              More info can be found here  https   zgheb com i v blog amp pl 71 12 11 2020 - Unobstrusively replace text with JavaScript Note  I am the author of said link

User · Answer

Sometimes changing document body innerHTML breaks some JS scripts on page  Here is version  that only changes content of text elements   function replace element  from  to        if  element childNodes length            element childNodes forEach child   gt  replace child  from  to          else           const cont   element textContent          if  cont  element textContent   cont replace from  to             replace document body  new RegExp  hello    g     hi

User · Answer

I was trying to replace a really large string and for some reason regular expressions were throwing some errors exceptions    So I found this alternative to regular expressions which also runs pretty fast  At least it was fast enough for me    var search    search string   var replacement    replacement string    document body innerHTML   document body innerHTML split search  join replacement    src  How to replace all occurrences of a string in JavaScript

User · Answer

To replace a string in your HTML with another use the replace method on innerHTML   document body innerHTML   document body innerHTML replace  hello    hi      Note that this will replace the first instance of hello throughout the body  including any instances in your HTML code  e g  class names etc     so use with caution - for better results  try restricting the scope of your replacement by targeting your code using document getElementById or similar   To replace all instances of the target string  use a simple regular expression with the global flag   document body innerHTML   document body innerHTML replace  hello g   hi

User · Answer

I had the same problem  I wrote my own function using replace on innerHTML  but it would screw up anchor links and such   To make it work correctly I used a library to get this done   The library has an awesome API  After including the script I called it like this   findAndReplaceDOMText document body      find   texttofind     replace   texttoreplace

User · Answer

The function below works perfectly for me      Note this  is  JQuery  see below for JS solution instead function replaceText selector  text  newText  flags      var matcher   new RegExp text  flags       selector  each function          var  this     this       if    this children   length          this text  this text   replace matcher  newText              Here s a usage example   function replaceAllText       replaceText       hello    hi    g         document  ready replaceAllText      html   ajaxStop replaceAllText     You can also use do a direct replacement like so   document body innerHTML   document body innerHTML replace  hello    hi      But be careful with it since it may affect the tags  css and scripts as well   EDIT  As for a pure JavaScript solution use this method instead   function replaceText selector  text  newText  flags      var matcher   new RegExp text  flags     var elems   document querySelectorAll selector   i     for  i   0  i  lt  elems length  i        if   elems i  childNodes length        elems i  innerHTML   elems i  innerHTML replace matcher  newText

User · Answer

I am new to Javascript and just started learning these skills  Please check if the below method is useful to replace the text    lt script gt       var txt document getElementById  demo   innerHTML      var pos   txt replace  Hello g   hi       document getElementById  demo   innerHTML   pos    lt  script gt

User · Answer

I ended up with this function to safely replace text without side effects  so far    function replaceInText element  pattern  replacement        for  let node of element childNodes            switch  node nodeType                case Node ELEMENT NODE                  replaceInText node  pattern  replacement                   break              case Node TEXT NODE                  node textContent   node textContent replace pattern  replacement                   break              case Node DOCUMENT NODE                  replaceInText node  pattern  replacement                       It s for cases where the 16kB of findAndReplaceDOMText are a bit too heavy

User · Answer

Try to apply the above suggested solution on pretty big document  replacing pretty short strings which might be present in innerHTML or even innerText  and your html design becomes broken at best  Therefore I firstly pickup only  text node elements via HTML DOM nodes  like this  function textNodesUnder node     var all         for  node node firstChild node node node nextSibling       if  node nodeType  3  all push node       else all   all concat textNodesUnder node          return all     textNodes textNodesUnder document body  for  i in textNodes    textNodes i  nodeValue   textNodes i  nodeValue replace  hello g   hi           and followingly I applied the replacement on all of them in cycle

User · Answer

Use the default javascript string replace function  var curInnerHTML   document body innerHTML  curInnerHTML   curInnerHTML replace  hello    hi    document body innerHTML   curInnerHTML

[javascript] Replace words in the body text

Examples related to javascript

Examples related to html