Question

我正试图在<div>标记中包含每两个单词。
例如所需的输出看起来像这样：
<div>one two</div><div>three four</div><div>five six</div>等等但实际上我得到的是，前两个词被忽略了，我实际上得到了：
one two<div>three four</div><div>five six</div>
这是我的代码，
HTML：

<h2><div>This is some long heading text to use as an example. This is some long heading text to use as an example</h2>

jQuery的：

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

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

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

        newhtml.push(html[i]);
    }

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

我尝试在html中的<div>标记之后添加<h2>标记以实现此效果，但它似乎仍然无法正常工作。任何建议将不胜感激！

Answer 1

var html = 'This is some long heading text to use as an example.'.split(" ");
var newhtml = [];
for( var i=0 ; i<html.length-1 ; i+=2 ) newhtml.push(html[i]+' '+html[i+1]);
if( html.length&1 ) newhtml.push(html[html.length-1]);

'<div>'+newhtml.join('</div><div>')+'</div>'

最后一行是字符串"<div>This is</div><div>some long</div><div>heading text</div><div>to use</div><div>as an</div><div>example.</div>"

Answer 2

我不是一个正则表达式的职业选手，但只是为了提供一个可能的选择，我认为你可以使用类似的东西来做到这一点：

string.replace(/(\S+ \S+)/g, "<div>$1</div>");

像这样：

$("h2 div").each(function(){
    this.innerHTML = this.innerHTML.replace(/(\S+ \S+)/g, "<div>$1</div>");
});

http://jsfiddle.net/6JeFH/1/

Answer 3

您明确跳过循环中的第一个匹配项，因此在循环之前添加newhtml.push("<div>")会有所帮助。这仍然会导致您创建一个未关闭的div的问题，因此建议在循环之后添加newhtml.push("</div>")。

Answer 4

这对我有用：

<h2>This is some long heading text to use as an example. This is some long heading text to use as an example</h2>
<script type="text/javascript">
    $("h2").each(function() {
        var html = $(this).html().split(" ");
        var newhtml = [];
        newhtml.push("<div>");

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

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

            newhtml.push(html[i]);
        }

        newhtml.push("</div>");

        $(this).html(newhtml.join(" "));
    });
</script>

编辑：实际上Entoarox的代码回答：）

Answer 5

你可以这样做：

HTML :(还没有div）

<h2>This is some long heading text to use as an example. This is some long heading text to use as an example</h2>

JS（注意最后一行）：

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

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

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

        newhtml.push(html[i]);
    }

    $(this).html("<div>"+ newhtml.join(" ") +"</div>");
});

Answer 6

Please have a look at the fiddle:

我提供了两个例子

第一个不依赖于html最初的格式错误

<h2>
     <div>
          This is some long heading text to use as an example. 
          This is some long heading text to use as an example
    </div>
</h2>

只有<h2>标签和奇数个字的

<h2>
    This is some long heading text to use as an example. 
    This is some long heading text to use as an example oddnumber
</h2>

同样的JavaScript在它们上面运行

$("h2 > div").each(divByTwo);
$("h2").each(divByTwo);

function divByTwo() {
    var html = $(this).html().trim().split(" ");
    var newhtml = [];   
    for(var i=1; i< html.length; i += 2) {
        newhtml.push("<div>" + html[i - 1] + " " + html[i]+ "</div>");       
    }

    if (html.length % 2 !== 0) {
        newhtml.push("<div>" + html[html.length - 1] + "</div>");
    }
    $(this).html(newhtml.join(" "));
}

jQuery：在div标签中包含每两个单词

6 个答案: