jQuery Wrapping some string with conditional

Question

i have string need to be wrapped by tag HTML with conditional like this:

<h1>Test</h1>

Then nothing will happen

<h1>Test Lagi</h1>

Then the first word will be wrapped by span, result <h1><span>Test</span> Lagi</h1>

<h1>Test Lagi ah</h1>

Then only the first word will be wrapper by span, result:

<h1><span>Test</span> Lagi ah</h1>

How to do that in jQuery?

Please don't use signatures. Also, there may be a somewhat related question and solution over here: http://stackoverflow.com/questions/3760085/first-word-in-string-with-jquery — Cᴏʀʏ, Sep 24 '11 at 18:07
@JIP, I'm not against a "thank you" as a sign off, just pointing out that the OP also included a signature, which the FAQ frowns upon. — Cᴏʀʏ, Sep 24 '11 at 18:24

Chango · Accepted Answer · 2011-09-24T18:49:33.600

2

After following CoryLarson's link Here is a better solution: http://jsfiddle.net/avmFe/

$(function(){
    $('h1').each(function(){
       var me = $(this);
        if(/(\W+)/.test(me.html())) {
          me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));
        }
    });
});

Hope it helps.

edited Sep 24 '11 at 18:49

answered Sep 24 '11 at 18:31

Chango

6,754
1
28
37

Kanishka Panamaldeniya · Answer 2 · 2011-09-24T19:03:59.087

2

$(function(){
    $('h1').each(function(){
        var txt = $(this).text();
        var wordArray = txt.split(' ');

        var new_first = '<span>'+wordArray[0]+'</span>';
        var new_txt = txt .replace("wordArray[0]",new_first);
        $(this).html(new_txt);

    });
});

edited Sep 24 '11 at 19:03

answered Sep 24 '11 at 18:33

Kanishka Panamaldeniya

17,302
31
123
193

score 0 · Answer 3 · edited Sep 24 '11 at 19:00

0

http://jsfiddle.net/Rs4TA/1/

$('*:contains("Test")').html('<span>Test</span>');

If your "test" is a static text, it could be done by this way.

edited Sep 24 '11 at 19:00

Kanishka Panamaldeniya

17,302
31
123
193

answered Sep 24 '11 at 18:11

e382df99a7950919789725ceeec126

5,751
4
31
56

1

word `test` is not static word. – GusDeCooL Sep 24 '11 at 18:21

maxedison · Answer 4 · 2011-09-24T20:17:53.737

-1

This does it: http://jsfiddle.net/RE9rp/1/

And here's the JS:

function wrapFirstWord($el, word){
    $el.each(function(){
        var txt = $(this).text();
        var wordArray = txt.split(' ');
        if(wordArray[0] === word && wordArray.length > 1){
            var newHTML = '<span>' + word + '</span>';
            for(var i = 1; i < wordArray.length; i++){
                newHTML += ' ' + wordArray[i];
            }
            $(this).html(newHTML);
        }
    });
}

$(function(){
    wrapFirstWord($('h1'),'Test');
});

You simply pass to wrapFirstWord() the set of elements you want to check for the word ($el), as well as the word you are looking for.

edited Sep 24 '11 at 20:17

answered Sep 24 '11 at 18:13

maxedison

17,243
14
67
114

im sorry, i mean word test is only for testing purpose not the real implementation. The first word can be `test`, `morning`, `afternoon` – GusDeCooL Sep 24 '11 at 18:21
Does that mean that you want something that will wrap any first word? Or you want to be able to pass the chosen word to the function as an argument? – maxedison Sep 24 '11 at 19:39
i want something that wrap the first word – GusDeCooL Sep 24 '11 at 19:57
See my updated fiddle/code. This will let you accomplish the task with any word and for any element. – maxedison Sep 24 '11 at 20:18

jQuery Wrapping some string with conditional

4 Answers4