Метод замены jQuery не обновляет старое значение новым значением

Question

Я пытаюсь заменить старые значения новыми значениями в теге P с помощью метода JQuery replace (String SearchValue, String replaceValue) при нажатии кнопки. если я передаю Фиксированные значения, он обновляется, но когда я прохожу через текстовое поле ввода, он не обновляется.

Я использовал другой метод для решения этой проблемы, даже пытался в интернете, но не приветствовал.

 <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 создает регулярное выражение, и поэтому оно может вести себя неожиданно, если во вводе используются специальные символы.