CODEWITHSUNDEEP
javascriptjquerystr-replace
user7423754
user7423754

Reputation:

Replace Content that match RegExp in jQuery

I want to find specific content that match with regexp from whole page and then need to replace with another text. Here is my code which I'm using.

 var reg = /exam+ple/;
    $("body").html(function () {
        return $(this).html().replace(reg, "exammmmmmmmple"); 
    });

  // html
  <body>
     This is some example text<br/>
     exammmple.com
     <a href="http://example.com"> Visit a site </a>
     <div id="example"> Here is some other text</div>
  </body>

The code which I used work but there is one problem it can't replace content which is inside href and id I want changes everywhere where the match of regExp.

And there is another problem this code is slow because first you take whole body content then you make changes to it and then you insert content again in body, is there any other way to fast it ?

Upvotes: 2

Views: 58

Answers (2)

Robin F.
Robin F.

Reputation: 1215

You could iterate trough the nodes. One way to do so is using the nodeIterator. An example of this could look like the following snippet.

edit

(since you not only want to replace text)

With this solution it won't get better than changing each property of the currentNode. I adjusted the snippet below to also change the attribute href. You can always iterate trough all attributes - for example if you want to change them all.

suggestion

I strongly suggest looking at

  • difference between Nodes / Elements.

  • https://developer.mozilla.org/en-US/docs/Web/API/Node

  • https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator

to optimize the snipped for your use case.

trick to work with nodes

In the developer tools of chrome you can go to the Elements tab right click on the element you want to see the properties of and click copy -> Copy selector. Now you go to the Sources tab. On the right you'll see a Watch section. Open it and put the following snippet there:

document.querySelector('PASTE YOU SELECTOR HERE');

example snippet

let currentNode;
const nodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL);

while(currentNode = nodeIterator.nextNode()) {
  if(currentNode.nodeType == Node.ELEMENT_NODE && currentNode.attributes.href) {
    currentNode.attributes.href = currentNode.attributes.href.replace(/someText/g, 'foo');
  }
  if(currentNode.nodeType == Node.TEXT_NODE) {
    currentNode.nodeValue = currentNode.nodeValue.replace(/someText/g, 'foo');
  }
}

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115242

Use global modifier(g) with regex to replace all occurrence.

var reg = /exam+ple/g;


var reg = /exam+ple/g;
$("body").html(function(_, htm) {
  return htm.replace(reg, "exammmmmmmmple");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  This is some example text<br/> exammmple.com
  <a href="http://example.com"> Visit a site </a>
  <div id="example"> Here is some other text</div>
</body>

FYI : It's really a bad idea to update the entire HTML since which recreates all the elements and that would destroy all the attached event handlers since elements are recreated.

Upvotes: 2

Related Questions