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

Calvin Godfrey
– Calvin Godfrey

2019-06-10 15:57:13 +00:00
Commented Jun 10, 2019 at 15:57 — Calvin Godfrey
– Calvin Godfrey, Commented Jun 10, 2019 at 15:57

T.J. Crowder · Accepted Answer · 2019-06-10 16:49:09Z

0

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>

edited Jun 10, 2019 at 16:49

answered Jun 10, 2019 at 15:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

লুটু পুটু Over a year ago

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.

T.J. Crowder Over a year ago

@লুটুপুটু - I've answered that comment using an edit to the answer. Happy coding!

Collectives™ on Stack Overflow

Javascript - Replace a Regex with another Regex

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related