时间戳

首页 > 解决方案 > jQuery替换方法不会用新值更新旧值

jquery - jQuery替换方法不会用新值更新旧值

问题描述

我正在尝试通过在按钮单击时使用 JQuery replace(String SearchValue, String replaceValue) 方法将旧值替换为 P 标记中的新值。如果我通过固定值，那么它会更新，但是当我通过输入文本框时，它不会。

我使用不同的方法来解决这个问题，甚至在互联网上尝试过，但没有称呼。

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

我想用爱代替仇恨

<script>
    function ChangeData() {
        var oldData = $('#TxtOne').val();
        oldData = '/' + oldData + '/ig';
        var newData = $('#TxtTwo').val();
        var $p = $('p');
        $p.text($p.text().replace(oldData, newData));
        //$p.text($p.text().replace(/hate/ig, 'love'));
    };
</script>

没有结果

标签： jqueryreplace

解决方案

您的问题是您无法通过以下方式构建正则表达式：

oldData = '/' + oldData + '/ig';

相反，您可以使用RegExp构造函数来构建表达式并在您的replace方法中使用它。

另外，在这里我将一个箭头函数传递给.text()方法，它将设置文本等于它返回的任何内容。

请参见下面的示例：

$("#btnOne").click(ChangeData);

function ChangeData() {
  var oldData = new RegExp($('#TxtOne').val(), 'ig');
  var newData = $('#TxtTwo').val();
  $('p').text((_, txt) => txt.replace(oldData, newData));
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <p>I want to replace hate with love</p>
  <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" class="btn btn-primary" value="Update" id="btnOne" name="btnOne" style="float:right" />
  </div>
</div>

但是请注意，RegExp它会创建一个正则表达式，因此如果在输入中使用特殊字符，它可能会出现意外行为。

推荐阅读