使用jQuery在x个单词后插入一个<br/>标签

Question

我想在标题中的5个单词之后插入<br />，但我使用的那段代码不起作用。请参阅以下内容：

$("#post-id > h2").each(function() {
    var html = $(this).html().split(" ");
    html = html[0] + "<br />" + html.slice(1).join(" ");
    $(this).html(html);
});

此功能可以正常工作 - 如果您想在第一个字词后添加<br /> tage。但是，如果我将其更改为html.slice(5)，那么它将无法正常工作。

我怎么能解决这个问题，所以5个单词后它可以正常工作？或者可能采用不同的方法更合适？感谢您的帮助！

Answer 1

$("#post-id > h2").each(function() {
     var html = $(this).html().split(" ");
     html = html.slice(0,5).join(" ") + "<br />" + html.slice(5).join(" ");
     $(this).html(html);
});​

http://jsfiddle.net/f4chL/

基本思路是你从索引零切片获取前5个单词，获取数组的5个元素，连接它们，添加你的break标记，然后在索引5处获取数组中的其余元素（因为它为零）基于索引）并将它们与空格连接并将其转储到最后

修改

为了获得完整的答案，如果OP确实想要在每5个单词后分割，这是另一种方法

$("h2").each(function() {
var html = $(this).html().split(" ");
var newhtml = [];

for(var i=0; i< html.length; i++) {

    if(i>0 && (i%5) == 0)
        newhtml.push("<br />");

    newhtml.push(html[i]);
}

$(this).html(newhtml.join(" "));
});​

http://jsfiddle.net/2Z2nM/

Answer 2

您可以将代码简化为：

.replace(/((\w+\W+){5})/, '$1<br/>')

见FIDDLE。根据您对单词的定义，您可以将\w+更改为适合您的任何内容。

Answer 3

用以下代码替换您的代码：

$(".map .tooltip-inner > h2").each(function() {
    var html = $(this).html().text();
    var result = html.replace(/\ /g,'<br/>'); 
    $(this).html(result);
});