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: stackoverflow.com/questions/3760085/… — Cᴏʀʏ
– Cᴏʀʏ, Commented Sep 24, 2011 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ᴏʀʏ
– Cᴏʀʏ, Commented Sep 24, 2011 at 18:24

Chango · Accepted Answer · 2011-09-24 18:49:33Z

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, 2011 at 18:49

answered Sep 24, 2011 at 18:31

Chango

6,8021 gold badge30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kanishka Panamaldeniya · Accepted Answer · 2011-09-24 19:03:59Z

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, 2011 at 19:03

answered Sep 24, 2011 at 18:33

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

Comments

Kanishka Panamaldeniya · Accepted Answer · 2011-09-24 19:00:53Z

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, 2011 at 19:00

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

answered Sep 24, 2011 at 18:11

e382df99a7950919789725ceeec126

6,0215 gold badges34 silver badges56 bronze badges

1 Comment

GusDeCooL Over a year ago

word test is not static word.

maxedison · Accepted Answer · 2011-09-24 20:17:53Z

-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, 2011 at 20:17

answered Sep 24, 2011 at 18:13

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

4 Comments

GusDeCooL Over a year ago

im sorry, i mean word test is only for testing purpose not the real implementation. The first word can be test, morning, afternoon

maxedison Over a year ago

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?

GusDeCooL Over a year ago

i want something that wrap the first word

maxedison Over a year ago

See my updated fiddle/code. This will let you accomplish the task with any word and for any element.

Collectives™ on Stack Overflow

jQuery Wrapping some string with conditional

4 Answers 4

Comments

Comments

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

4 Comments

Linked

Related