Javascript - Replace a Regex with another Regex

Question

I have a string (0511 51 51 86 86 for example) in my web page (may have multiple occurrences), and I want to replace them with another string (0511 51 51 86 86* in this case), using the Regular Expression.

I have tried with replace() function, to find all the occurrences and replace. This works fine with strings as parameter in replace(). But doesn't if I use Regex.

I have tried this:

$("body").html($("body").html().replace(/0\d{3} \d{2} \d{2} \d{2} \d{2}/g, /0\d{3} \d{2} \d{2} \d{2} \d{2}\*/g));

What I want is, replace all this: 0511 51 51 86 86 with that: 0511 51 51 86 86* using the Regular Expression.

Possible duplicate of [this question](https://stackoverflow.com/questions/6230010/javascript-regexp-replace) — Calvin Godfrey, Jun 10 '19 at 15:57

T.J. Crowder · Answer 1 · 2019-06-10T16:49:09.973

In your replacement string, you can use $& to include all of the replaced text. So:

replacement = original.replace(/\d{4}(?: \d{2}){4}/g, "$&*");

Example:

const original = "blah blah blah 0511 51 51 86 86 blah blah blah";
const replacement = original.replace(/\d{4}(?: \d{2}){4}/g, "$&*");
console.log(replacement);

You've asked:

Is this legal: $("body").html($("body").html().replace(/\d{4}(?: \d{2}){4}/g, "$&*")); I am using $("body").html() since I don't have a specific string. The whole web page content is there.

Yes, but it's a very bad idea. It tears down the page entirely (removing any event handlers or element data that may have been attached) and replaces it with a new page that's the result of parsing the HTML all over again.

Instead, use a simple recursive function to update the text nodes of the page:

const rex = /\d{4}(?: \d{2}){4}/g;

function doReplacement(element) {
    for (let child = element.firstChild; child; child = child.nextSibling) {
        if (child.nodeType === 3) {        // A text node
            child.nodeValue = child.nodeValue.replace(rex, "$&*");
        } else if (child.nodeType === 1) { // An element
            doReplacement(child);
        }
    }
}

doReplacement(document.body);

Live Example:

const rex = /\d{4}(?: \d{2}){4}/g;

function doReplacement(element) {
    for (let child = element.firstChild; child; child = child.nextSibling) {
        if (child.nodeType === 3) {        // A text node
            child.nodeValue = child.nodeValue.replace(rex, "$&*");
        } else if (child.nodeType === 1) { // An element
            doReplacement(child);
        }
    }
}

doReplacement(document.body);

blah blah blah 0511 51 51 86 86 blah blah blah
<p>
  blah blah blah 0511 50 52 68 68 blah blah blah
  <span>
    blah blah blah 0511 49 27 67 24 blah blah blah
  </span>
</p>
<div>
  blah blah blah 0511 51 51 86 86 blah blah blah
  <p>
    blah blah blah 0511 50 52 68 68 blah blah blah
    <span>
      blah blah blah 0511 49 27 67 24 blah blah blah
    </span>
  </p>
</div>

Thanks for nice solution. Is this legal: $("body").html($("body").html().replace(/\d{4}(?: \d{2}){4}/g, "$&*")); I am using $("body").html() since I don't have a specific string. The whole web page content is there. — লুটু পুটু, Jun 10 '19 at 16:11
@লুটুপুটু - I've answered that comment using an edit to the answer. Happy coding! — T.J. Crowder, Jun 10 '19 at 16:49

Javascript - Replace a Regex with another Regex

1 Answers1