Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite
1

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 contenteditable div

<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?

share|improve this question

3 Answers

up vote 4 down vote accepted

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

var clean = explicit.replace(/badtext1/g,"cleantext2"/).replace(/cleantext1/g,"cleantext2"/).replace(/badtext2/g,"cleantext2"/);
share|improve this answer
You can also replace multiple strings with multiple other strings (at the same time), as described here: stackoverflow.com/a/15604206/975097 – Anderson Green Mar 24 at 21:30
up vote 2 down vote

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/

share|improve this answer
up vote 2 down vote

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|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.