只替换整个单词,而不是单词

Question

我试图仅替换整个单词,但我的脚本替换了单词的所有区分大小写的实例.这是我的代码:

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

在上面的例子中,结果显示为"B BAT cat",但我期待的是"B CAT cat".我搜索了这个问题,找不到任何相关内容.

有人能帮帮我吗？任何帮助表示赞赏.

我在这里包括一个小提琴:http://jsfiddle.net/1z8f7b23/

Answer 1

如果您只想搜索整个单词,可以使用\b锚点(单词边界)包围搜索表达式.

字边界是\w和[ \W或字符串的开头/结尾] 之间的任何位置.也就是说,它匹配一个字符匹配[a-zA-Z0-9_]但另一个不匹配的字符.

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>

如果要替换C#,则不\b能再使用,因为#角色不在\w.您必须提供自己的断言版本.这对于单词的结尾是直截了当的,但不是单词的开头,因为JS不支持lookbehinds.所以你必须使用一个解决方法:

• 使用(?=\s|$)而不是\b在单词的末尾.
• (\s|^)在单词的开头使用,但您必须将其保留在替换中.这样(?<=\s|^)看起来会更容易,但JS不支持它.
• 此外,最好将patern包含在(?:...... )组中.

• 如果您的搜索模式不是正则表达式,请确保使用它进行转义

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

  否则搜索字符串C$就不匹配了.

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"/>