1

我对这段代码感到困惑

<!DOCTYPE html>
<html>

    <body>
        <p>Click the button to replace "Microsoft" with "W3Schools" in the paragraph
            below:</p>
        <p id="demo">Microsoft Visit Microsoft! Microsoft visit visit microsoft Visit Visit
            Visit Visit</p>
        <button onclick="myFunction()">Try it</button>
        <script>
            function myFunction() {
                document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML.replace(/ Visit |Microsoft/gi, ' test ');
            }
        </script>
    </body>

</html>

当点击按钮时有些文字没有改变，如果再次点击会改变

第一次点击后

test test test ! test test visit test test Visit test Visit

第二次点击后

test test test ! test test test test test test test test

为什么有些词第一次没有改变？真挚地

4

3 回答 3

2

发生这种情况是因为在您的#demo内容中，两个未替换的Visit单词后面没有空格（第一个有新行，第二个有行尾）。

为了修复它，您可以使用\bas word boundary : /\bVisit\b|Microsoft/gi。

演示：http: //jsfiddle.net/dyz5w/

于 2013-01-27T16:39:19.300 回答
1

发生这种情况是因为您的正则表达式中的空格Visit：

 / Visit /

这需要在“访问”一词的两侧留一个空格。正则表达式匹配不重叠，所以如果你有一个像

  Visit Visit Visit Visit

....那么每个“访问”实例之间的两个空格只能属于一个匹配项。因此，您的正则表达式匹配将如下所示（{用于显示匹配的开始}位置和结束位置）：

 { Visit }Visit{ Visit }Visit

尝试在“访问”之间使用两个空格。你会看到它得到了他们所有。

编辑：Vision 打败了我；\b如果您只想匹配单词，他的使用建议是完美的。

于 2013-01-27T16:46:23.620 回答
0

/ Visit |Microsoft/gi只是意味着

  • 找到“访问”（周围有空格）
  • |（或者）
  • 找到“微软”
  • g标志 - 找到所有匹配项
  • i标志 - 进行不区分大小写的搜索
于 2013-01-27T16:47:21.357 回答