只替换整个单词，而不是单词 [英] 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>

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

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.

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

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

推荐答案

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

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

单词边界是 \w 和 [\W 或字符串的开始/结束] 之间的任何位置.也就是说，它在一个字符匹配 [a-zA-Z0-9_] 而另一个不匹配的字符之间进行匹配.

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>

如果要替换C#，就不能再使用\b，因为#字符不在\w.您必须提供自己的断言版本.这对于单词的结尾很简单，但对于单词的开头则不然，因为 JS 不支持lookbehinds.所以你必须使用一种解决方法:

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:

• 在词尾使用 (?=\s|$) 而不是 \b.
• 在单词的开头使用 (\s|^) 但您必须将其保留在替换中.使用 (?<=\s|^) 后视会更容易，但 JS 不支持.
• 此外，最好将模式包含在 (?:...) 组中.

• 如果您的搜索模式不是正则表达式，请确保使用

• 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, '\\$&');

否则像 C$ 这样的搜索字符串将不匹配.

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

这篇关于只替换整个单词，而不是单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！