0

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/

Community
  • 1
  • 1
jbwharris
  • 710
  • 1
  • 10
  • 30
  • You have an answer there : http://stackoverflow.com/questions/918792/use-jquery-to-change-an-html-tag – Thomas Ruiz Dec 10 '12 at 20:21
  • Your code will return the desired string. Use `$('div.innerWrapper:contains("Office Current Listings")').html($(this).html().replace('Office Current Listings', '

    Office Current Listings

    '));` to change it.     – Bali Balo Dec 10 '12 at 20:21
  • I'm curious as to why exactly I got down voted on this question? I hadn't run across that thread that Thomas mentioned, but tried a solution on another thread that was an accepted answer and was supposed to cover my issue. I couldn't ask for clarification on that thread given my current privileges, so I posed the question and did receive a workable solution to my problem below. Where exactly in the SO code did I err here to get 2 downvotes? As an inexperienced jQuery user it may be a trivial question to others, but to me it solved a problem I had already invested time into solving. – jbwharris Dec 10 '12 at 20:38
  • welcome to stack overflow, did any of the answers help you solve the problem? You should accept the best answer if so. – Matt Wolfe Dec 11 '12 at 17:59

2 Answers2

4

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/

Matt Wolfe
  • 8,924
  • 8
  • 60
  • 77
  • I did find a flaw in this, as it wraps everything within that div with the H2. My example didn't have additional content, but there is in the box I have in my site. – jbwharris Dec 10 '12 at 21:11
  • Checkout my new version that will replace all. It works similar to shmiddty's answer but will work with all matched innerWrapper div's and replace all occurances of "Officer Current Listings" within, wrapping in h2 tag. – Matt Wolfe Dec 10 '12 at 22:45
  • Thanks Matt, I ended up selecting Shmiddty's answer as I really only needed this for a single instance, so that was what I used. It's a silly thing where on one page of our CMS the title isn't wrapped. As I don't have access to the template files I wanted to devise a workaround that will conditionally show just on that page. Not ideal, but it does solve my problem going forward. Thanks for the help. – jbwharris Dec 12 '12 at 14:18
2

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.

Shmiddty
  • 13,847
  • 1
  • 35
  • 52