How to replace multiple keywords by corresponding keywords with the `replace` method?

41,759

Solution 1

use /.../g to indicate a global replace.

var clean = explicit.replace(/badtext1/g,"cleantext2"/).replace(/cleantext1/g,"cleantext2"/).replace(/badtext2/g,"cleantext2"/);

Solution 2

A generic way to handle this is as follows:

Establish a dictionary and build a regexp:

  var dictionary = { bad: 'good', worse: 'better', awful: 'wonderful'},
      regexp = RegExp ('\\b(' + Object.keys (dictionary).join ('|') + ')\\b', 'g');

The regexp is constructed from the dictionary key words (note they must not contain RegExp special characters).

Now do a replace, using a function in the place of the replacing string, the function simply return the value of the corresponding key.

  text = text.replace (regexp, function (_, word) { return dictionary[word]; });

The OP made no reference to upper/lower case. The following caters for initial and all caps and wraps the code as a function :

  function clean (text) {
    var dictionary = { bad: 'good', worse: 'better', awful: 'wonderful'},
        regexp = RegExp ('\\b(' + Object.keys (dictionary).join ('|') + ')\\b', 'ig');

    return text.replace (regexp, function (_, word) { 
      _ = dictionary[word.toLowerCase ()];
      if (/^[A-Z][a-z]/.test (word)) // initial caps
        _ = _.slice (0,1).toUpperCase () + _.slice (1);
      else if (/^[A-Z][A-Z]/.test (word)) // all caps
        _ = _.toUpperCase ();
      return _;
    });
  }

See the fiddle : http://jsfiddle.net/nJNq2/

Solution 3

I think the answer from Jinzhao about covers it, but some other notes.
1) Don't use " in the RegEx
2) You can match multiple strings, but I think only replace to one value using a single RegEx. The only way I can think of to match multiple is as Jinzhao has done.

The following code snippet seems to work for me:

function censorText(){             
    var explicit = document.getElementById("textbox").innerHTML;
    var clean = explicit.replace(/bad|worse/gi,"good");
     document.getElementById("textbox").innerHTML = clean;
}

The other issue I'm finding is that when a replace happens, it returns the cursor to the start of the text box, which is going to get frustrating. If I find an answer to that, I'll post.

Share:
41,759

Related videos on Youtube

Shrey Gupta
Author by

Shrey Gupta

Washed up web developer and current ML model rat.

Updated on July 09, 2022

Comments

  • Shrey Gupta
    Shrey Gupta over 1 year

    I want to make a content editable div in which I replace explicit words with asterisks. This is my JavaScript code:

    function censorText(){
        var explicit = document.getElementById("textbox").innerHTML;
        var clean = explicit.replace(/"badtext1","cleantext1"|"badtext2","cleantext2"/);
        document.getElementById("textbox").innerHTML = clean;
    }
    

    Here’s the HTML for my <div contenteditable>:

    <div contenteditable="true" onkeyup="censorText()" id="textbox">Hello!</div>
    

    As you can see, I tried using a regex operator to replace multiple strings at once, but it doesn’t work. It doesn’t replace badtext2 with cleantext2, and it replaces badtext1 with 0. How can I make a single .replace() statement replace multiple strings?

  • Anderson Green
    Anderson Green about 11 years
    You can also replace multiple strings with multiple other strings (at the same time), as described here: stackoverflow.com/a/15604206/975097