jQuery用条件包装一些字符串答案

【问题标题】：jQuery Wrapping some string with conditionaljQuery用条件包装一些字符串
【发布时间】：2025-11-26 15:25:01
【问题描述】：

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

<h1>Test</h1>

那么什么都不会发生

<h1>Test Lagi</h1>

那么第一个单词会被span包裹，结果<h1><span>Test</span> Lagi</h1>

<h1>Test Lagi ah</h1>

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

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

如何在 jQuery 中做到这一点？

【问题讨论】：

请不要使用签名。另外，这里可能有一些相关的问题和解决方案：*.com/questions/3760085/…
说谢谢@_@是错误的
@JIP，我不反对“谢谢”作为签字，只是指出 OP 还包括一个签名，常见问题解答对此不屑一顾。

标签： javascript jquery

【解决方案1】：

在关注 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>'));
        }
    });
});

希望对你有帮助。

【讨论】：

【解决方案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);

    });
});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

word test 不是静态词。

【解决方案4】：

这样做：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()。

【讨论】：

对不起，我的意思是单词测试仅用于测试目的而不是真正的实现。第一个词可以是test、morning、afternoon
这是否意味着您想要包含任何第一个单词的东西？或者您希望能够将所选单词作为参数传递给函数？
我想要包含第一个单词的东西
查看我更新的小提琴/代码。这将使您可以使用任何单词和任何元素来完成任务。