Question

Is it possible to add a HTML element before a specific string using jQuery? For example, if I have:

<h4>Men's Basketball vs. Georgetown</h4>

And I would like to make it:

<h4>Men's Basketball <span class="team">vs. Georgetown</span></h4>

Can I do that with jQuery? I have tried to use a variety of options (:contains, prepend(), html(), pop(), etc. But none of them seem to work exactly right.

Answer 1

jsFiddle Demo

Assuming that for every h4 you would like the vs. and what follows wrapped in a span, then you should iterate through each one, determine the location of vs. in the string and then wrap it in a span.

html: <h4>Men's Basketball vs. Georgetown</h4>

css: .team{ color: red; }

js:

$("h4").each(function(){
 var v = 'vs.',t = $(this), prefix, suffix;
 if(t.text().indexOf(v) > -1 ){
  prefix = t.text().substr(0,t.text().indexOf(v));
  prefix += "<span class='team'>";
  suffix = t.text().substr(t.text().indexOf(v));   
  suffix += "</span>";
  t.html(prefix+suffix);
 }
});