Vanilla JavaScript 在字符串中一定数量的字符后附加 <br> 标签

Question

需要一些关于 JavaScript DOM 操作的帮助来将字符串分离到新行中。

我有一个围绕字符串的 div ......

<div id= "customer-comments">
  // Div contains text of comments & no other wrapping HTML tags
Customer comment 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula neque. Aenean urna nisi, rutrum ac neque eu, aliquet aliquam ligula. Customer comment 2 - Etiam venenatis lacus quam, et imperdiet risus tempor quis. Aenean elit justo, fermentum ac leo vel, bibendum mattis est. Vestibulum sed condimentum mi, id ullamcorper libero
</div>

我正在尝试使用 vanilla js<br>在字符串的特定数量（120 个字符）之后附加一个标签。我正在使用前端界面（深刻）来加载屏幕，并且有一个功能可以将 onload JavaScript 事件添加到特定屏幕，所以我正在尝试下面的一些普通 js。

// Add new lines for customer comments display panel
let comments = document.getElementById('customer-comments').innerText; // grab comment string in div

function newLines(str) {
    if (str.length >= 120) {
        let result = '';
        while (str.length > 0) {
            result += str.substring(0, 120) + '<br>';
            str = str.substring(120);
        }
        return result;
    }
   return str;
}

newLines(comments);

感谢您的帮助

谢谢

Answer 1

您可以使用基本的正则表达式来完成此操作，而不是循环和字符串操作。

var out = document.querySelector("#foo");
var text = out.textContent;
var str = text.replace(/(.{10})/g, '$1<br/>');
out.innerHTML = str;

<div id="foo">1234567890123456789012345678901234567890123456789012345678901234567890</div>