Question

嗨我仍然是javascript的新手所以我想创建一个脚本，在每3行后插入换行符。所以这是我到目前为止的代码

var num = `http://url.com
http://url2test.com
http://url3nag.com
http://url4lalala.com
http://url5papapapapa.com
http://url6ddadadadad.com
http://url7etet.com
http://url8testtest.com`;
var newNum = num.toString().match(/.{3}/g).join('</br>');
console.log(newNum);

它做错了。它似乎是插入每个3个字符而不是行。任何人都可以帮我修复代码吗？

Answer 1

您可以使用replace功能。请尝试以下代码。

＆＃13;

var num = `http://url.com
http://url2test.com
http://url3nag.com
http://url4lalala.com
http://url5papapapapa.com
http://url6ddadadadad.com
http://url7etet.com
http://url8testtest.com`;
var newNum = num.replace(/(.*\n.*\n.*\n)/g, '$1<br>');
console.log(newNum);

＆＃13;

修改

我在下面的代码中对RegEx进行了一些更改。这将允许您指定需要添加<br>的行数。

＆＃13;

var num = `http://url.com
http://url2test.com
http://url3nag.com
http://url4lalala.com
http://url5papapapapa.com
http://url6ddadadadad.com
http://url7etet.com
http://url8testtest.com`;
var newNum = num.replace(/((.*\n){3})/g, '$1<br>');
console.log(newNum);

＆＃13;

在上面的RegEx中，.*将匹配所有字符，直到行尾，\n将与新行字符匹配。

(.*\n){3}

我已将其括在括号中，将其标记为一个组，并使用{3}表示前一组重复了3次。

((.*\n){3})

然后将整个RegEx括在括号中，将其用作可以使用replace在$1部分中引用的第一个匹配组。

您可以用任意数字替换{3}。

Answer 2

使用HTML字符串时应避免使用字符串操作。同样使用BR来打破线也不是一个好主意。您应该使用块元素。

var num = `http://url.com
http://url2test.com
http://url3nag.com
http://url4lalala.com
http://url5papapapapa.com
http://url6ddadadadad.com
http://url7etet.com
http://url8testtest.com`;

var content = document.querySelector('.content');

var urls = num.split('\n');
var temp;

for(var i = 0; i< urls.length; i++) {
  if(!temp || (i+1) % 3 === 0) {
    if (temp) content.appendChild(temp);
    temp = document.createElement('div');
  }
  
  var span = document.createElement('span');
  span.classList.add('link')
  span.innerHTML = urls[i];
  temp.appendChild(span);
}
content.appendChild(temp);

.link {
  margin: 5px;
}

<div class='content'>

参考：

Is it sometimes bad to use <BR />?

在javascript中每3行插入换行符？

2 个答案:

修改

参考：