jQuery replace方法无法通过输入框值替换P标签内容求助

我一眼就看出问题所在啦！你遇到的核心问题是错误地把字符串当成正则表达式来使用，导致匹配逻辑完全不符合预期。

问题拆解 #

当你写oldData = '/' + oldData + '/ig'时，最终得到的是一个字面量字符串（比如"/hate/ig"）。但String.replace()方法如果第一个参数是字符串，它只会精确匹配这个字符串的完整内容，不会把它解析成正则表达式的规则。这就意味着你的代码实际上是在找"/hate/ig"这个完整串，而不是全局匹配所有的"hate"（忽略大小写），自然就没有任何替换效果了。

修正后的完整代码 #

只需要改用RegExp构造函数来动态创建正则表达式，就能解决这个问题：

<div class="container">
 <div class="row">
 <input type="text" value="" id="TxtOne" name="TxtOne" placeholder="Old Word" class="form-control" />
 </div>
 <div class="row">
 <input type="text" value="" id="TxtTwo" name="TxtTwo" placeholder="New Word" class="form-control" />
 </div>
 <div class="row">
 <input type="button" onclick="ChangeData();" class="btn btn-primary" value="Update" id="btnOne" name="btnOne" style="float:right" />
 </div>
</div>
<!-- 示例P标签，用于测试替换 -->
<p>I hate jQuery, I really hate it!</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 function ChangeData() {
 var oldData = $('#TxtOne').val().trim(); // 去除前后空格，避免匹配干扰
 var newData = $('#TxtTwo').val().trim();
 var $p = $('p');
 // 用RegExp构造函数创建正则，第二个参数传入匹配标志（i=忽略大小写，g=全局匹配）
 $p.text($p.text().replace(new RegExp(oldData, 'ig'), newData));
 };
</script>

额外优化提示 #

• 如果你的旧值可能包含正则特殊字符（比如.、*、+、?等），需要先转义这些字符，否则会破坏匹配规则。可以添加一个转义函数：

  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
  

  然后修改oldData为escapeRegExp($('#TxtOne').val().trim())，这样就能兼容特殊字符的匹配需求了。

内容的提问来源于stack exchange，提问作者Premjit Gill