CODEWITHSUNDEEP
jquery
jbwharris
jbwharris

Reputation: 720

Find A String, then wrap is with a tag

I am trying to figure out how to select a single snippet of text and then wrap it with an H1. I'm looking for something real light weight as it's only being used in 1 spot on my site. It seems pretty simple, but either the answers have been way too lengthy to bother with or I just can't seem to get it working.

HTML

<div class="innerWrapper">
  Office Current Listings
</div>

JS

$('div.innerWrapper:contains("Office Current Listings")').html()
.replace('Office Current Listings', '<h1>Office Current Listings</h1>');

I used the answer from this previous question, but it doesn't seem to work. I put together a demo for it if you'd like to take a look.

http://jsfiddle.net/gjtjh/

Upvotes: 0

Views: 1823

Answers (2)

Matt Wolfe
Matt Wolfe

Reputation: 9284

How about this?

$('div.innerWrapper:contains("Office Current Listings")').wrapInner('<h1/>');​​​​

--Update--

to handle the text being anywhere, including sub div's, try this:

$('div.innerWrapper').each(
    function(index) {
        var $el = $(this);
        var html = $el.html();
        $el.html(html.replace(/Office Current Listings/g, "<h1>Office Current Listings</h1>"));
    }
);​

http://jsfiddle.net/eDyBu/3/

Upvotes: 4

Shmiddty
Shmiddty

Reputation: 13967

http://jsfiddle.net/gjtjh/1/

var div = $('div.innerWrapper:contains("Office Current Listings")');
var html = div.html();
div.html(html.replace('Office Current Listings', '<h1>Office Current Listings</h1>'));​

You aren't actually setting the html of your div. replace is a function of string, so you're replacing the text, then doing nothing with it.

Upvotes: 2

Related Questions