jQuery 用条件包装一些字符串

Question

我有字符串需要用标签 HTML 包裹，条件如下：

<h1>Test</h1>

然后什么都不会发生

<h1>Test Lagi</h1>

然后第一个单词将由 span 包裹，结果

;测试 Lagi

<h1>Test Lagi ah</h1>

然后只有第一个单词会被 span 包装，结果：

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

在 jQuery 中如何做到这一点？

Answer 1

这样做： http://jsfiddle.net/RE9rp/1/

是 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');
});

这 只需将您想要检查单词 ($el) 的元素集以及您要查找的单词传递给 wrapFirstWord() 即可。

Answer 2

在关注 CoryLarson 的链接后，这是一个更好的解决方案：
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>'));
        }
    });
});

希望有帮助。

Answer 3

$(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);

    });
});

Answer 4

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

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

如果您的“测试”是静态文本，可以用这种方式完成。