Question

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

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

我想成功：

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

我可以用jQuery做到吗？我试图使用各种选项（：contains，prepend（），html（），pop（）等等。但它们似乎都没有完全正确。

Answer 1

你可以这样做：

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

假设您要在所有vs元素中包装h4和文本末尾，那么您可以

$('h4').each(function(){
   var bip = $(this).text().split(/(?<vs)/);      
   if (!bip.length) return;
   $(this).html(bip[0]+'<span class="team">'+bip[1]+'</span>');
});

Answer 2

的 jsFiddle Demo 的

假设每个h4您希望vs. 和包含在一个范围内，那么您应该遍历每一个，确定{{{{1}的位置1}}在字符串中，然后将其包裹在一个范围内。

html：vs.

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

JS：

.team{ color: red; }

Answer 3

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

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

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

或者如果您有Id。让我们说Id1。

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

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

Answer 4

我愿意......

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

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

这似乎比以前的答案更具动态解决方案。

Here's your working jsFiddle

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

4 个答案: