Question

我有一个用逗号分隔的单词div。我如何安排它们，以便每行有四个单词？

编辑：单词是动态生成的

Answer 1

使用<pre>...</pre>标记。屏幕上的文字将完全按照您格式化的方式显示在屏幕上。

Answer 2

每四个单词后使用BR标签。见http://www.w3.org/wiki/Html/Elements/br

Answer 3

如果str包含单词，则：

var lines = str.match(/([^,]+,*){1,4}/g);
var output = lines === null ? '' : lines.join('<br>');

实施例

如果：

str = "a,b,c,d,e,f,g,h,i";

然后output将是：

"a,b,c,d,<br>e,f,g,h,<br>i"

演示here。

Answer 4

使用jQuery简化对DOM的访问：

var content = $('#mydiv').text();              // get current content from the page
var words = content.split(',');                // break into words
for (var i = 3; i < words.length; i += 4) {    // every fourth word (but not the first)
    words[i] += '<br>';                        // append <br>
}
content = words.join(' ');                     // and rejoin with spaces
$('#mydiv').html(content);                     // and put it back in the page

注意：我已使用.html()将内容写回，否则<br>代码将无法正常呈现。

Answer 5

使用jQuery，everthing更容易。 jQuery是一堆用JavaScript编写的工具，它全部保存到一个名为$的变量中。您可以调用jQuery，它将为您调用基本JavaScript并使生活更轻松。

将其添加到您网页的<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

将id="arrange"添加到div。如果你不喜欢单词arrange，你可以使用你喜欢的任何单词。确保没有空格，只有字母，数字，下划线。

<div class="arrange">One two three four one two three four</div>

在包含文本

的div之后的任何位置添加此项

<script type="text/javascript">
$('div.arrange').each(function () { // For each div with the class="arrange"
    var words = this.innerHTML.split(/,/) // Get an array of all the words (separated by comma)
    var newHTML = '' // We will add the new contents of the div here.
    for(var i = 0; i < words.length; i++) { // For every word
        if(i != 0) {// If this is not the first word
            if(i % 4 == 0) { // If this is the fourth word
                newHTML += '<br/>' // Add a <br/>
            } else {
                newHTML += ',' // Add a comma
            }
        }
        newHTML += words[i] // Add the word
    }
    this.innerHTML = newHTML
})
</script>

在这种情况下，我使用jQuery循环遍历每个div class="arrange"

您可以在此处查看实时示例：http://jsfiddle.net/gf5wD/

此示例自动包含jQuery并自动将JavaScript添加到最后。

您最终可能希望将jquery文件保存到您控制的服务器。你头脑中的脚本标签会调用jquery服务器，这意味着如果他们的网站出现故障，你的网站就会搞砸了。

Answer 6

问候用户521180我得到了你，我认为这段代码会有所帮助

 function arrangeDiv() {
        var div = document.getElementById('div');
        var divinnerHTMLAry = div.textContent.split(' ');
        div.innerHTML = "";
        var divNewinnerHTML = '';
        var count = 0;
        for (var i = 0; i < divinnerHTMLAry.length; i++) {
            if (divinnerHTMLAry[i] != "" && divinnerHTMLAry[i] != "\n") {
                divNewinnerHTML += divinnerHTMLAry[i] + " ";
                count += 1;
                if (count == 4) {
                    divNewinnerHTML += "<br />";
                }
            }
        }
        div.innerHTML = divNewinnerHTML;
    }

问候：）

Answer 7

编辑：这是一个PHP解决方案

也许这样的东西应该能够做出你想要的东西。

$string = 'a, b, c, d, e, f';
$array = explode(',', $string,);

foreach($array as $key => $word) {
  print trim($word);
  if ($key % 4 == 0) {
    print '<br />';
  }
}

如果您以其他方式接受您的言论，只需安排代码，以便跳过explode()功能。

我怎样才能重新排列div中的单词

7 个答案:

实施例