CODEWITHSUNDEEP
javascriptregexreplace
Sudhin
Sudhin

Reputation: 87

Replacing only whole word, not words

I am trying to replace whole words only, but my script replaces all the case-sensitive instances of the word. Here is my code:

<script>

function repl() {

var lyrics = document.getElementById('Lyricstuff').value;
var find = document.getElementById('rs1').innerHTML;
var spantag = document.getElementById('rt1').innerHTML;
var regex = new RegExp(find, "g");

document.getElementById('Results').value = lyrics.replace(regex, spantag) ;

}

</script>
<textarea id="Lyricstuff" cols="60" rows="10">C CAT cat</textarea>
 <button onclick="repl()">Replace</button>
<textarea id="Results" cols="60" rows="10"></textarea>
<span id="rt1">B</span><span id="rs1">C</span>

In the example above, the results appear "B BAT cat", but what I'm expecting is "B CAT cat". I have searched for this question and couldn't find anything related.

Can somebody please help me? Any help is appreciated.

I have included a fiddle here: http://jsfiddle.net/1z8f7b23/

Upvotes: 5

Views: 11090

Answers (1)

Lucas Trzesniewski
Lucas Trzesniewski

Reputation: 51330

If you want to search whole words only, you can surround your search expression with \b anchors (word boundaries).

A word boundary is any place between \w and [\W or start/end of string]. That is, it matches between characters where one character matches [a-zA-Z0-9_] but the other doesn't.

function repl() {
  var lyrics = document.getElementById('Lyricstuff').value;
  var find = document.getElementById('rs1').innerHTML;
  var spantag = document.getElementById('rt1').innerHTML;
  var regex = new RegExp('\\b' + find + '\\b', "g");

  document.getElementById('Results').value = lyrics.replace(regex, spantag) ;
}
<textarea id="Lyricstuff" cols="60" rows="4">C CAT cat</textarea>
<button onclick="repl()">Replace</button>
<textarea id="Results" cols="60" rows="4"></textarea>
<span id="rt1">B</span><span id="rs1">C</span>

If you want to replace C#, you can't use \b anymore because the # character is not in \w. You'll have to provide your own version of the assertion. This is straightforward for the end of the word, but not for the start of the word since JS doesn't support lookbehinds. So you have to use a workaround:

  • Use (?=\s|$) instead of \b at the end of the word.
  • Use (\s|^) at the start of the word but you'll have to keep it in the replacement. This would have been easier with a (?<=\s|^) lookbehind but it's not supported in JS.
  • Also, it's better to enclose the patern in a (?:...) group.

  • If your search pattern is not meant to be a regex, make sure to escape it with

    find = find.replace(/[-\\()\[\]{}^$*+.?|]/g, '\\$&');

    Otherwise search strings like C$ wouldn't match.

function repl() {
  var lyrics = document.getElementById('Lyricstuff').value;
  var find = document.getElementById('rs1').value;
  var spantag = document.getElementById('rt1').value;

  // I don't know if you want this or not...
  find = find.replace(/[-\\()\[\]{}^$*+.?|]/g, '\\$&');

  var regex = new RegExp('(\\s|^)(?:' + find + ')(?=\\s|$)', "g");

  document.getElementById('Results').value = lyrics.replace(regex, "$1" + spantag);
}
<textarea id="Lyricstuff" cols="60" rows="4">This is C# and this is C#m</textarea>
<button onclick="repl()">Replace</button>
<textarea id="Results" cols="60" rows="4"></textarea><br/>
<input id="rs1" value="C#"/><input id="rt1" value="1"/>

Upvotes: 22

Related Questions