javascript - 如何在单词周围添加跨度元素

Question

如何使用 jQuery 在标题的最后一个单词周围添加 span 元素。

我想要这样的输出：

<div class="hedererty">
  <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing <span>elit</span></h1>
</div>

注意：这是示例标题。在我的网站标题中随着不同的页面而变化。

有什么想法或建议吗？谢谢。

Answer 1

尝试

$('.hedererty h1').html(function(idx, html){
    return html.replace(/(\w+)$/, '<span>$1</span>')
})

演示：小提琴

或者

$('.hedererty h1').html(function (idx, html) {
    return html.replace(/(\s[\S]+)$/, '<span>$1</span>')
})

演示：小提琴

Answer 2

split()字符串，添加span到弹出的字符串并使用连接字符串join()

$(".hedererty h1").html(function(){
    var mystring= $(this).text().split(" "); //Split the string
    var lastword = mystring.pop(); //Pop the last index value
    return mystring.join(" ")+ (mystring.length > 0 ? " <span>"+ lastword + "</span>" : lastword); 
    //Return concatenated string
});

演示