Question

我试图通过在单击按钮时使用JQuery replace（String SearchValue，String replaceValue）方法来用P标记中的新值替换旧值。如果我通过固定值，则更新，但是当我通过输入文本框时，则不会更新。

我使用了不同的方法来解决这个问题，甚至在Internet上尝试了但没有打招呼。

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

没有结果

Answer 1

您的问题是，您无法通过执行以下操作来构建正则表达式：

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创建了一个正则表达式，因此如果在输入中使用特殊字符，它可能会表现出异常。

jQuery replace方法不使用新值更新旧值

1 个答案: