javascript - 使用 jQuery 在 x 个单词后插入标签

Question

我正在尝试<br />在标题中插入 5 个单词后，但我使用的这段代码不起作用。请看下面：

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

此功能效果很好 - 如果您想在第一个单词之后添加一个标签<br />。但是，如果我将其更改为then 它将无法正常工作。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 个元素，加入它们，添加中断标记，然后在索引 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);
});