Replace all occurrences of a string in HTML page with jquery

by Virender
August 4, 2015

Replace all string in HTML page with jquery

Some time we need to replace all string from html page . Today we are showing how to replace all string in HTML page with jquery.

Plunker – http://plnkr.co/edit/dtkRKH3dHYOs1rCOT7uP?p=preview

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
   <title> Replace all occurrences of a string in HTML page with jquery </title>
   <script
      <script>
         $(function() {
            // replace function replace "xyz.com" to "www.ourNewSite.com" without regular expression
            $('#btnReplaceWithOutRegularExpression').click(function() {
               var obj0 = $('#Sitecontent');
               var pos = 0;
               var replaceTo = "oldsite.com"
               var replaceWith = "www.ournewsite.com";
               while (pos !== -1) {
                  pos = obj0.html().indexOf(replaceTo, pos); //indexOf return the index position of text
                  if (pos != -1) // loop run till string exists in document
                  {
                     obj0.html(obj0.html().replace(replaceTo,
                        replaceWith))
                     pos = pos + replaceWith.length;
                  }
               }
            });
            // replace function replace "xyz.com" to "www.ourNewSite.com" with the help of regular expression
            $('#btnReplaceWithRegularExpression').click(function() {
               var obj0 = $('#Sitecontent1');
               var replaceTo = /oldsite.com/g
               var replaceWith = "www.ournewsite.com";
               obj0.html(obj0.html().replace(replaceTo, replaceWith))
            });
         });
      </script>
</head>
<body>
   <button id="btnReplaceWithOutRegularExpression">Replace oldsite.com to www.ournewsite.com without regular expression</button>
   <br>
   <br>
   <button id="btnReplaceWithRegularExpression">Replace oldsite.com to www.ournewsite.com with regular expression</button>
   <br>
   <br>
   <div id="Sitecontent">
      <P dir="ltr" style="text-align: left;" trbidi="on"> Welcome to oldsite.com. </P>
      <P dir="ltr" style="text-align: left;" trbidi="on">
      In oldsite.com we work on latest technologies. </P>
      <P dir="ltr" style="text-align: left;"
      trbidi="on"> Our Office oldsite.com xxx xx </P>
      <P dir="ltr" style="text-align: left;" trbidi="on">
      Thanks oldsite.com </P>
   </div>
   <br>
   <div id="Sitecontent1">
      <P dir="ltr" style="text-align: left;" trbidi="on"> Welcome to oldsite.com. </P>
      <P dir="ltr" style="text-align: left;" trbidi="on">
      In oldsite.com we work on latest technologies. </P>
      <P dir="ltr" style="text-align: left;"
      trbidi="on"> Our Office oldsite.com xxx xx </P>
      <P dir="ltr" style="text-align: left;" trbidi="on">
      Thanks oldsite.com </P>
   </div>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
<title> Replace all occurrences of a string in HTML page with jquery </title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js" type="text/javascript"></script>
<script>
$(function() {
// replace function replace "xyz.com" to "www.ourNewSite.com" without regular expression
$('#btnReplaceWithOutRegularExpression').click(function() {
var obj0 = $('#Sitecontent');
var pos = 0;
var replaceTo = "oldsite.com"
var replaceWith = "www.ournewsite.com";
while (pos !== -1) {
pos = obj0.html().indexOf(replaceTo, pos); //indexOf return the index position of text
if (pos != -1) // loop run till string exists in document
{
obj0.html(obj0.html().replace(replaceTo,
replaceWith))
pos = pos + replaceWith.length;
}
}
});
// replace function replace "xyz.com" to "www.ourNewSite.com" with the help of regular expression
$('#btnReplaceWithRegularExpression').click(function() {
var obj0 = $('#Sitecontent1');
var replaceTo = /oldsite.com/g
var replaceWith = "www.ournewsite.com";
obj0.html(obj0.html().replace(replaceTo, replaceWith))
});
});
</script>
</head>

<body>
<button id="btnReplaceWithOutRegularExpression">Replace oldsite.com to www.ournewsite.com without regular expression</button>
<br>
<br>
<button id="btnReplaceWithRegularExpression">Replace oldsite.com to www.ournewsite.com with regular expression</button>
<br>
<br>
<div id="Sitecontent">
<P dir="ltr" style="text-align: left;" trbidi="on"> Welcome to oldsite.com. </P>
<P dir="ltr" style="text-align: left;" trbidi="on">
In oldsite.com we work on latest technologies. </P>
<P dir="ltr" style="text-align: left;"
trbidi="on"> Our Office oldsite.com xxx xx </P>
<P dir="ltr" style="text-align: left;" trbidi="on">
Thanks oldsite.com </P>
</div>
<br>
<div id="Sitecontent1">
<P dir="ltr" style="text-align: left;" trbidi="on"> Welcome to oldsite.com. </P>
<P dir="ltr" style="text-align: left;" trbidi="on">
In oldsite.com we work on latest technologies. </P>
<P dir="ltr" style="text-align: left;"
trbidi="on"> Our Office oldsite.com xxx xx </P>
<P dir="ltr" style="text-align: left;" trbidi="on">
Thanks oldsite.com </P>
</div>
</body>

</html>

Need a help , connect with us on skype

Share:

Tags:

0 0 votes
Article Rating
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Unknown
5 years ago

You could also write:

$("body").html($("body").html().replace(/oldsite.com/g,'www.ournewsite.com'));

Unknown
5 years ago

Thanks for this article, after a long battle with my legacy code I was able to implement the replace all with the help of this article 🙂

Awais
6 years ago

Actually replace() function is work with only first occurrence so use this very simple code.

str.replace(/ /g, '-');

This code will replace all spaces with –

I code this code from http://www.tutorialhall.com/2015/10/how-to-replace-all-occurrence-of-string-jquery-javascript.html

Related posts