在JavaScript中每3行插入換行符？

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功能。 試試下面的代碼。

 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); 

編輯

我在下面的代碼中對RegEx進行了一些更改。 這將允許您指定需要添加<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 newNum = num.replace(/((.*\\n){3})/g, '$1<br>'); console.log(newNum); 

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

(.*\\n){3}

我將其括在圓括號中以將其標記為一個組，並使用{3}表示前一組重復3次。

((.*\\n){3})

然后將整個RegEx括在圓括號中，以將其用作第一個匹配的組，可在replace部分中使用$1進行引用。

您可以將{3}替換為任何數字。

Answer 2

使用HTML字符串時，應避免使用字符串操作。 同樣，使用BR中斷線也不是一個好主意。 您應該改用block元素。

 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'> 

參考：

• 使用<BR />有時會不好嗎？