jQuery replace method is not updating old value with new value

Question

I am trying to Replace Old Values with New Values in P Tag By Using JQuery replace(String SearchValue, String replaceValue) Method on buton click. if I pass Fixed Values then it update but when I Pass through input text Box then it doesn't.

I used Different method to Solve this problem even tried on internet but no salutation .

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

I want to replace hate with Love

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

No Result

Please add a [mcve] (including input and expected output) which shows the actual problem. — Andreas, Mar 30 '19 at 12:51
[`replace`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) is not a jQuery function, it's a JavaScript function. — Heretic Monkey, Mar 30 '19 at 12:54
`oldData = '/' + oldData + '/ig'` doesn't magically generate a regular expression object. — Andreas, Mar 30 '19 at 12:56
What is the alternative to generate regular expression could you suggest any salutation, Andreas — Premjit Gill, Mar 30 '19 at 13:00

Nick Parsons · Accepted Answer · 2019-03-30T13:36:43.417

Your issue is that you cannot build a regular expression by doing:

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

Instead, you can use the RegExp constructor to build your expression and use that in your replace method.

Also, here I am passing an arrow function into the .text() method which will set the text equal to whatever it returns.

See example below:

$("#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>

Please note, however, the RegExp creates a regular expression, and so it may behave unexpectedly if special characters are used in the input.

this will only work if `oldData` doesn't contain any characters that would have a special meaning when used in a regular expression. — Andreas, Mar 30 '19 at 13:02
Yes Now it works fine, Thanks for solving my Code Problem Mr. Nick Parsons, — Premjit Gill, Mar 30 '19 at 13:06
[Is there a RegExp.escape function in Javascript?](https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript) — Andreas, Mar 30 '19 at 13:16

jQuery replace method is not updating old value with new value

1 Answers1