jQuery: Find & replace string in html; avoid src and href values

Question

Say I have this:

<div>
    People say <a href="apples.html">apples</a> are nice. 
    It's true, apples are nice. You go, <b>apples</b>!
    <img src="apples.jpg" />
</div>

How would I go about replacing every occurrence of "apples" (with "oranges", for example) within that div (including any tag's element content and plain text) WHILE avoiding replacing such occurrences in the href and src attributes, or any attribute for that matter.

So the end result would be:

<div>
    People say <a href="apples.html">oranges</a> are nice.
    It's true, oranges are nice. You go, <b>oranges</b>!
    <img src="apples.jpg" />
</div>

Should note, while text() would do me a good job in this example, I will be replacing with html elements so it's not particularly helpful in the actual case.

Thanks!

Is it possible that you've tried and failed? Can you show us what you've tried? — Jay Blanchard
– Jay Blanchard, Commented Apr 11, 2014 at 20:19
Should note, while text() would do me a good job in this example, I will be replacing with html elements so it's not gonna help me in the real thing. @Jay tried a bunch of approaches and none of them worked out as I had initially expected, I'm not thinking this through properly for some reason. — raccoon
– raccoon, Commented Apr 11, 2014 at 20:22

Matt Tester · Accepted Answer · 2014-04-11 22:02:08Z

2

The :contains selector will help you here. Given that the div is the root of you search & replace, the following will allow you to replace apples with oranges:

$("div").find(":contains('apples')").each(function(){
    $this = $(this);

    //Example replacement using HTML, but can also just us text() for simple changes
    $this.html($("<i>").text("oranges"));
});

Based on your comments, I've shown it replacing apples with a little html ... italic oranges.

See the JSFiddle for a working example.

Update - altering source html

The comments pointed out that this missed out the "apples" in the body of the div. If you have control of the Html (I assume you do), then it makes everything easier if you can change the Html to wrap the problem "apples" in a span, so <span>apples</span>. This makes the html:

<div>
    People say <a href="apples.html">apples</a> are nice. 
    It's true, <span>apples</span> are nice. You go, <b>apples</b>!
    <img src="apples.jpg" />
</div>

Basically, markup needs to be in place to help you here. See the updated JSFiddle.

If that isn't possible, an additional Regex to catch this would be needed.

Update - can't update source html, use Regex

Ok, so altering the source html is not possible. The following solution, just uses a Regex over the html, which matches all "apples" that are followed by a "<" or a space:

$("div:contains('apples')").each(function(){
    $this = $(this);
    $this.html($this.html().replace(/apples(?=<|\s)/gi, "oranges"));
});

Working version shown in the JSFiddle

edited Apr 11, 2014 at 22:02

answered Apr 11, 2014 at 20:45

Matt Tester

4,8304 gold badges31 silver badges33 bronze badges

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

5 Comments

raccoon Over a year ago

This however doesn't replace the "apples" in the plain text bit. Another approach I attempted also ended up with the same result.

Matt Tester Over a year ago

@frostyNinja True, I'd missed that bit!

raccoon Over a year ago

Wrapping in spans is out of the question, because this ties in with a blog with hundreds of occurrences of strings that I need replaced. The whole deal behind this thing is to wrap said strings in spans with specific classes. Care to elaborate on a regular expression that would work?

Matt Tester Over a year ago

Just updated now with a Regex example, working over the html.

Matt Tester Over a year ago

I got there in the end :)

Jay Blanchard · Accepted Answer · 2014-04-11 21:04:21Z

0

You could use a look-around assertion with regex (http://www.regular-expressions.info/lookaround.html) but that would be over complicating the problem if all you have to do is replace a single word -

$('div').find(':contains("apples")').each(function() {
    $(this).text('oranges');
});

http://jsfiddle.net/qh4w7/

answered Apr 11, 2014 at 21:04

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Collectives™ on Stack Overflow

jQuery: Find & replace string in html; avoid src and href values

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related