Replace html part by javascript

Question

I have problem: I need to replace some word on page with needed html. For example:

t = $('body').html();
t = t.replace(/Myword/g, '<div></div>');
$('body').html(t);

It is working successfully. But... If body contains javascript tag - JS running again.

If I use document.body - it working

t = document.body.innerHTML;
t = t.replace(/Myword/g, '<div></div>');
document.body.innerHTML = t;

But I am interested in jQuery solution. Maybe you have it?

Thanks in advance

instead of modifying the entire page html you need to target only those specific elements with the given text — Arun P Johny
– Arun P Johny, Commented Jan 4, 2014 at 8:06
@ArunPJohny It can be plain text. Something like '<div><form>...</form>...Many many text...<div>...</div>Myword</div> — indapublic
– indapublic, Commented Jan 9, 2014 at 15:39

Aneesh Dogra · Accepted Answer · 2014-01-04 08:22:19Z

3

A simple solution would be to ignore all the script tags.

t = $('body').clone().find("script").remove().end().html();
t = t.replace(/Myword/g, '<div></div>');
$('body').html(t);

Demo

edited Jan 4, 2014 at 8:22

answered Jan 4, 2014 at 8:15

Aneesh Dogra

7406 silver badges31 bronze badges

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

1 Comment

indapublic Over a year ago

I want use my script on 3rd party pages. I think script deleting is not good idea.

Zaheer Ahmed · Accepted Answer · 2014-01-04 08:18:09Z

1

This solution might help you.

JavaScript not executed if:

JavaScript inside the <script type=”text/xml”> doesn’t execute
JavaScript inside the <script type=”text/xml” type=”text/javascript”> doesn’t execute as well because only the first type is considered

so change type:

function preventJS(html) {
     return html.replace(/<script(?=(\s|>))/i, '<script type="text/xml" ');
}

and use it:

t = $('body').html();
t = t.replace(/Myword/g, '<div></div>');
$('body').html(preventJS(t));

answered Jan 4, 2014 at 8:18

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

2 Comments

AnalogWeapon Over a year ago

I think you are trying to put <tag> in your text and it is getting interpreted and hidden from view, so your first bullet points aren't clear. try putting back ticks around the tags.

indapublic Over a year ago

Hm. I need to check it. Thank you very much

AnalogWeapon · Accepted Answer · 2014-01-04 08:21:32Z

1

As Arun mentioned in the comments, you should target the elements more specifically. It sounds like <script> tags will be re-evaluated if you use JQuery to get the entire <body> content and then re-insert it. Try wrapping the desired content in a <div>:

<body>
    <div id="wrapper">
        <p>Text that will be altered</p>
    </div>
    <script type="text/javascript">
        //javascript code
    </script>
</body>

Then your code that will replace text can be:

t = $('#wrapper').html();
t = t.replace(/Myword/g, '<div></div>');
$('#wrapper').html(t);

answered Jan 4, 2014 at 8:21

AnalogWeapon

5481 gold badge4 silver badges16 bronze badges

2 Comments

AnalogWeapon Over a year ago

You might want to rephrase that to make it clear that capturing the entire content of <body> is a requirement.

AnalogWeapon Over a year ago

This SO question is asking the same thing, and they are discussing some other options there. Good luck!

megawac · Accepted Answer · 2014-01-07 06:04:45Z

1

A better way would be to just replace "Myword" in the most specific element possible. This will only replace Myword in the textNodes which contain it and nowhere else.

var each = Array.prototype.forEach;

var $myword = $(":contains('Myword')");
$myword.each(function() {
    each.call(this.childNodes, function(ele) {
        if(ele.nodeType === 3 && ele.nodeValue.indexOf('Myword') >= 0) {//if ele is a text node and contains myword
            ele.nodeValue = ele.nodeValue.replace(/Myword/g, "some text");
        } 
    }, this);
});

Try running it on this page

edited Jan 7, 2014 at 6:04

answered Jan 4, 2014 at 8:22

megawac

11.4k6 gold badges43 silver badges61 bronze badges

2 Comments

indapublic Over a year ago

But if I have two and more divs with "Myword" - it replace only one (last) occurrence

megawac Over a year ago

Yes, I mentioned that - you could do a filter to correct that if you wanted

Collectives™ on Stack Overflow

Replace html part by javascript

4 Answers 4

1 Comment

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related