jQuery - Select second word and warp the text

Question

I have a menu list like this:

<ul>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
</ul>

How can I automatically select the second word from li.but and warp it into a span like this:

<ul>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
</ul>

Thank you very much!

Šime Vidas · Accepted Answer · 2011-04-30T22:14:05.870

7

Here you go:

$('li.but > a').html(function(i, v) {
    return v.replace(/\s(.*?)\s/, ' <span>$1</span> ');
});

Live demo: http://jsfiddle.net/simevidas/6dkAy/3/

edited Apr 30 '11 at 22:14

answered Apr 30 '11 at 22:04

Šime Vidas

182,163
62
281
385

It works but also adds an extra "small" tag inside "span". Select output and view selection source. – Emre Erkan Apr 30 '11 at 22:10
I was trying to figure out a regex to do this, unfortunately this method (and mine, w/your fix) only works if there's a space after the `` tag. – Matt Ball Apr 30 '11 at 22:11
First I thought regex too but after a few trial and failure I choosed the longest but the safest method. – Emre Erkan Apr 30 '11 at 22:13
@kara I've updated my demo. It's OK now. I expect one space character (at least) between the second word and the `` tag. – Šime Vidas Apr 30 '11 at 22:15
@Matt You mean before? There has to be a space before the `` tag. – Šime Vidas Apr 30 '11 at 22:16
I tried my hand at the regex version and got it working with no changes to the markup needed. Check it out. – Matt Ball Apr 30 '11 at 22:23
@kara I initially placed the space character on the wrong place. It has to be between the second word and the `` tag. Good that you noticed this `:)` – Šime Vidas Apr 30 '11 at 22:24

Matt Ball · Answer 2 · 2011-04-30T22:22:34.137

3

Something like this:

$('ul > li.but > a').html(function (i, oldHtml)
{
    return oldHtml.replace(/(\s)(\w+)/, '$1<span>$2</span>');
});

Demo: http://jsfiddle.net/mattball/ptUuS/

edited Apr 30 '11 at 22:22

answered Apr 30 '11 at 22:00

Matt Ball

354,903
100
647
710

3

`html()` instead of `text()`. Live demo here: http://jsfiddle.net/simevidas/6dkAy/2/ – Šime Vidas Apr 30 '11 at 22:07
I had to ask a [new question](http://stackoverflow.com/questions/5845143/javascript-regular-expression-with-capturing-parentheses) to figure this out. `:)` – Šime Vidas Apr 30 '11 at 23:07
Btw, this would be ok too: `replace(/\s(\w+)/, ' $1')`. – Šime Vidas Apr 30 '11 at 23:11
@Šime yes, I figured that part out already, though it took a little while (then I realized, _duh_, exactly what BoltClock's answer said). Re: your other comment, I'd rather play it safe, since `\s` matches a whole lot more than just spaces. https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp#endnote_equivalent_s – Matt Ball Apr 30 '11 at 23:12

Joe Ng'ethe · Answer 3 · 2015-02-19T12:23:06.583

1

Below is a code for wrapping the second word in a span with a class. Maybe you can adopt it. do something like this;

$('.list-item a').each(function(){ var text = $(this).text().split(' '); if(text.length < 2) return; text[1] = '<span class="color-red">'+text[1]+'</span>'; $(this).html( text.join(' ') ); });

edited Feb 19 '15 at 12:23

answered Nov 26 '14 at 08:41

Joe Ng'ethe

874
2
12
26

score 1 · Answer 4 · answered Apr 30 '11 at 22:02

Here:

$('.but a').each(function() {
   var $a = $(this);
   var $small = $a.find('small');
   var smallText = $small.html();
   $small.remove();
   var arr = $a.html().split(' ');
   arr[1] = ['<span>', arr[1], '</span>'].join('');
   $a.html(arr.join(' ')).append(['<small>', smallText, '</small>'].join(''));
});

jsFiddle

score 1 · Answer 5 · answered Apr 30 '11 at 22:08

Here you go

$("ul > li > a").each(function(index, el) {

   var sec = $(this).html().split(" ");
   sec = sec[1].split("<")[0];
   var total = "<span>" + sec + "</span>";

   var html = $("ul > li > a").html();
   html = html.replace(sec, total);
   $(this).html(html);
});

jQuery - Select second word and warp the text

5 Answers5