Selectively replacing text with HTML with jQuery

Question

How can I replace text on a page using jQuery without replacing tags and text within tags such as: <a>,<input>,<button>,<textarea>,<input>,<select>.

For example, here is the HTML code

<html>
<head>
    <title>Testing</title>
</head>
<body>
    Hello, this is a test replacing {REPLACE_ME} with <b>{REPLACED}</b>.
    <br/><br/>
    I want {REPLACE_ME} and {REPLACE_ME} to be <b>{REPLACED}</b>, however I don't want this <a href="#">{REPLACE_ME}</a> to become <a href="#">{REPLACED}</a>.
    Same with <textarea>{REPLACE_ME}</textarea>, it shouldn't change.
    <br/><br/>
</body>

I have this jQuery to replace the text

var replaced = $("body").html().replace(/{REPLACE_ME}/gi,'<b>{REPLACED}</b>');
 $("body").html(replaced);

Here it is on JSFiddle

http://jsfiddle.net/E8ZPY/

You missed to add jQuery lib see it works without replacing tags jsfiddle.net/praveen_jegan/E8ZPY/3 — Praveen
– Praveen, Commented Dec 12, 2013 at 5:50

Paul Draper · Accepted Answer · 2013-12-12 07:22:34Z

3

$('body, body *:not(a,button,textarea,option)').contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    var escaped = $('<div></div>').text($(this).text()).html();
    $(this).replaceWith(escaped.replace(/\{REPLACE_ME\}/gi,'<b>{REPLACED}</b>'));
});

JSFiddle

(I didn't need to include input, and I used option instead of select, since option is the one with text nodes for children.)

edited Dec 12, 2013 at 7:22

answered Dec 12, 2013 at 5:52

Paul Draper

84.2k53 gold badges216 silver badges303 bronze badges

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

Comments

Rituraj ratan · Accepted Answer · 2013-12-12 05:52:07Z

0

first add jquery file

apply "\" in regex pattern for special character

var replaced = $("body").html().replace(/\{REPLACE_ME\}/gi,'<b>{REPLACED}</b>');
                             // see here^^^__________^^^^    

$("body").html(replaced);

see updated fiddle

answered Dec 12, 2013 at 5:52

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Comments

kavun · Accepted Answer · 2013-12-12 05:58:19Z

0

var replaced = $("body").html().replace(/[^>]{REPLACE_ME}[^<]*/gi, '<b>{REPLACED}</b>');
$("body").html(replaced);

answered Dec 12, 2013 at 5:58

kavun

3,3914 gold badges28 silver badges45 bronze badges

1 Comment

kavun Over a year ago

Looks like it's replacing {REPLACE_ME} not in tags with <b>{REPLACED}</b> to me...

Collectives™ on Stack Overflow

Selectively replacing text with HTML with jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related