How to replace multiple words in javascript

Question

I want to replace a few words in the text using replace() in javascript, how can I do this?

For example, if I want to replace “ Dave Chambers, David Chambers, Will Smith ” with “ Jackie Chan ”, regardless of case or lower-case, I need to constantly repeat the replace() method on the same string variable every time, those.

 var str = sometext.innerHTML; str.replace('Dave Chambers', 'Jackie Chan'); str.replace('David Chambers', 'Jackie Chan'); str.replace('Will Smith', 'Jackie Chan'); 

Answer 1

Use a regular expression with an alternator ( | ) and case insensitive ( /i ):

 var str = sometext.innerHTML, reg = /Dave Chambers|David Chambers|Will Smith/i; str = str.replace(reg, "Jackie Chan"); 

A shorter, more complex regular expression might be:

 /Dav(?:e|id) Chambers|Will Smith/i; 

And if there can be more than one occurrence, add a global modifier ( g ) to replace all:

 /Dav(?:e|id) Chambers|Will Smith/ig; 

You can learn more about regular expressions here or by searching on Google. You can see a working demo here .

Answer 2

 str.replace(/(Dav(e|id) Chambers)|(Will Smith)/ig, 'Jackie Chan'); 

Answer 3

You want to use regular expressions if you want to ignore the case:

 var str = sometext.innerHTML; str.replace(/Dave Chambers/ig, 'Jackie Chan') .replace(/David Chambers/ig, 'Jackie Chan') .replace(/Will Smith/ig, 'Jackie Chan'); 

You can do all this in one statement, as described above, and how I would prefer it to be more readable.

Answer 4

This function will replace any words you want in a string.

 function wordInString(s, words, replacement){ var re = new RegExp( '\\b' + words.join('|') + '\\b','gi'); return s.replace(re, replacement); } // usage: var str = 'did you, or did you not, get why?'; str = wordInString(str, ['YOU', 'get'], 'XXX'); console.log(str); // "did XXX, or did XXX not, XXX why?" 

Answer 5

vsync's answer helped me highlight the whole innerHTML word. This can be used for the question and for many other things, thanks!

 function highlightWord(word) { // get your current div content by id var string = document.getElementById('your-id').innerHTML; // set word to highlight var newWord = '<mark>' + word + '</mark>'; // do replacement with regular expression var allWords = new RegExp( '\\b' + word + '\\b','gi'); var newString = string.replace(allWords, newWord); // set your new div content by id document.getElementById('your-id').innerHTML = newString; }; 

Answer 6

If you want some kind of array to replace the array, observing the delimiters of type "." or ",", I created something similar that can help you.

 function arrayReplace( text, arrFrom, arrTo, caseSensitive ) { return text. replace(/</g," <<"). replace(/>/g,">> "). replace(/([\.\;\,])/g," <$1> "). split(" "). map( function(value) { var pos = arrFrom.indexOf( caseSensitive ? value : value.toLowerCase() ); if( pos == -1 ) { return value; } else { return arrTo[pos % arrTo.length]; } } ). join(" "). replace(/( \<|\> )/g,""); }; console.log( arrayReplace( "First example. Trivial case", [ "example", "case"], [ "demo", "test" ] ) ); // First demo. Trivial test console.log( arrayReplace( "Leaving earth, passing close to the sun, going to the moon.", [ "earth", "sun", "moon"], [ "EARTH", "SUN", "MOON"] ) ); // Leaving EARTH, passing close to the SUN, going to the MOON. console.log( arrayReplace( "Leaving earth, passing close to the sun, going to the moon.", [ "earth", "sun", "moon"], [ "PLANET"] ) ); // Leaving PLANET, passing close to the PLANET, going to the PLANET. console.log( arrayReplace( "Leaving earth, passing close to the sun, going to the moon.", [ "earth", "sun", "moon"], [ "PLANET", "STAR" ] ) ); // Leaving PLANET, passing close to the STAR, going to the PLANET. console.log( arrayReplace( "Rain rain, goes away, no one wants you any way.", [ "rain", "a"], [ "pig", "x"] ) ); // pig pig, goes away, no one wants you any way. console.log( arrayReplace( "Testing the <<function>>. Replacing, in <any> case. Even <the ;funny; ones>.", [ "funny", "even", "function" ], [ "complex", "including", "code" ] ) ); // Testing the <<code>>. Replacing, in <any> case. including <the ;complex; ones>.