使用jQuery在特定字符串之前添加Span

是否可以使用jQuery在特定字符串之前添加HTML元素？例如，如果我有：

<h4>Men's Basketball vs. Georgetown</h4>

男子篮球vs.乔治敦

我想说：

<h4>Men's Basketball <span class="team">vs. Georgetown</span></h4>

男子篮球vs.乔治敦

我可以用jQuery来实现吗？我尝试过使用各种选项（：contains、prepend（）、html（）、pop（）等），但它们似乎都不完全正确。

您可以这样做：

var h4 = $('h4');
var str = 'vs. Georgetown';
h4.html(h4.text().replace(str, '<span class="team">'+str+'</span>'));

我会

var str = $('h4').split('vs.'); // team name

$('h4').html(function(){
    return str[0] + 'vs. <span class="team"> '+ str[1] +'</span>';
});

var str=$（'h4'）.split（'vs.）；//团队名称
$（'h4'）.html（函数（）{
返回str[0]+'vs.+str[1]+'；
});

这似乎比前面的答案更具动态性

假设对于每个

h4

您希望将

vs.

和后面的内容包装在一个span中，那么您应该遍历每个span，确定

vs.

在字符串中的位置，然后将其包装在span中

html:

男子篮球vs.乔治敦

css:

.team{color:red；}

js:

$（“h4”）。每个（函数（）{
var v='vs'，t=$（this），前缀，后缀；
如果（t.text（）.indexOf（v）>-1）{
前缀=t.text（）.substr（0，t.text（）.indexOf（v））；
前缀+=“”；
后缀=t.text（）.substr（t.text（）.indexOf（v））；
后缀+=“”；
t、 html（前缀+后缀）；
}
});

如果我是你，我会给h4一个id

$(document).ready(function(){
    var text = $('h4').html().split('vs.');

    $('h4').html(function(){
        return text[0] + '<span class="team"> vs. '+ text[1] +'</span>';
    });
});

$（文档）.ready（函数（）{
var text=$（'h4'）.html（）.split（'vs.）；
$（'h4'）.html（函数（）{
返回文本[0]+'vs.+文本[1]+'；
});
});

或者如果你有一个Id，比如说Id1

$(document).ready(function(){
    var text = $('#Id1').html().split('vs.');

    $('#Id1').html(function(){
        return text[0] + '<span class="team"> vs. '+ text[1] +'</span>';
    });
});

$（文档）.ready（函数（）{
var text=$（'#Id1'）.html（）.split（'vs.）；
$（'#Id1'）.html（函数（）{
返回文本[0]+'vs.+文本[1]+'；
});
});

是否总是会有一个

vs.

后跟一个团队名称，然后是h4标记的结尾？是的，格式将始终相同（vs.后跟一个团队名称和结束语），但是vs.之后的团队名称将更改。“乔治敦”不过，对于不同的团队将是动态的。您在所有h4元素中都设置了相同的html。@我在OP的问题中没有看到任何迹象表明存在多个事件，或者这将是一个问题。如果是，他们可以简单地添加一个唯一的id或类并将其作为目标。这很有效！谢谢。我相信其他选项也会有效，但是有多个实例，所以这一个似乎效果最好。谢谢@Travis J！当我尝试复制你的答案时，我得到一个控制台错误“this.innerText未定义”@Chris-我使用jQuery的

.text（）对答案进行了编辑

method。这应该更兼容跨浏览器，我相信在ie8之前不支持innerText。支持ie的较低版本肯定会很乏味。

$(document).ready(function(){
    var text = $('h4').html().split('vs.');

    $('h4').html(function(){
        return text[0] + '<span class="team"> vs. '+ text[1] +'</span>';
    });
});

$(document).ready(function(){
    var text = $('#Id1').html().split('vs.');

    $('#Id1').html(function(){
        return text[0] + '<span class="team"> vs. '+ text[1] +'</span>';
    });
});