如何在单词周围添加跨度元素答案

【问题标题】：How to add span element around the word如何在单词周围添加跨度元素
【发布时间】：2013-10-05 06:51:36
【问题描述】：

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

我想要这样的输出：

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

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

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

【问题讨论】：

看到这个会给你你正在寻找的答案：stackoverflow.com/questions/7075397/…:)
和stackoverflow.com/questions/1788939/…

标签： javascript jquery html

【解决方案1】：

试试

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

演示：Fiddle

或

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

演示：Fiddle

【讨论】：

我不知道这是 Rakinikanth 提出的：D

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

Demo

【讨论】：