如何在 JavaScript 中添加适用于段落的换行符

Question

我写这个函数来格式化某个字符串：

var desc = document.getElementById('desc');
            var parContent = desc.textContent.trim();
            var tempPar = "";
            var j = 0;
            var k = 0;
            var built_val = "";
            for (var i = 0; i < parContent.length ; i++)
            {
                if (j == 19 || i == parContent.length-1)
                {
                    tempPar = parContent.substring(k, i);
                    tempPar = tempPar.concat("- n");
                    built_val = built_val.concat(tempPar);
                    tempPar = "";
                    //Restart j
                    j = 0;
                    //update k
                    k = i;
                    continue;
                }
                j++;
            }
            desc.textContent = built_val;

Desc是一个动态段落，通常首先为空，然后填充（其数据在页面加载后组成），j是一行中所需的字符数。

虽然现在我有另一个问题，那就是 不起作用;我也尝试了 br
.如何在 javascript 字符串中插入新的换行符，例如"built_val"？请注意如何在

所有内容之后

将其分配给 Html。

Answer 1

textContent 属性设置元素的文字文本（通过添加文本节点），并且不会将标记解析为 html。相反，您应该这样做：

desc.innerHTML = built_val;

Answer 2

是的，您正在使用.textContent这就是为什么<br>不会被解析的原因（这是一件好事！

您想使用document.createTextNode()和document.createElement('br')。

var desc = document.getElementById('desc');
var parContent = desc.textContent.trim();
var tempPar = "";
var j = 0;
var k = 0;
var built_val = "";
for (var i = 0; i < parContent.length; i++) {
    if (j == 19) {
        tempPar = parContent.substring(k, i);
        tempPar = tempPar.concat("- n");
        desc.appendChild(document.createTextNode(tempPar));
        desc.appendChild(document.createElement('br'));
        tempPar = "";
        //Restart j
        j = 0;
        //update k
        k = i;
        continue;
    }
    j++;
}
// No need for textContent anymore. Appending nodes did the work for us!

Answer 3

只是为了好玩：一种Array.forEach和String.slice的方法：

var desc = document.querySelector('#desc');
var parContent = desc.textContent.trim();
var block = 0;
parContent.split('').forEach(
  function(v, i) {
    if (i % 19 == 0) {
      desc.appendChild(document.createTextNode(parContent.slice(block, i)));
      desc.appendChild(document.createElement('br'));
      block = i;
    } 
  }
);
// last part
desc.appendChild(document.createTextNode(parContent.slice(block)));

<p id="desc">
  This string should be truncated every 19th position right? 
  Ok, let's give it a try using [Array.forEach]<br>
</p>

Answer 4

也有一个简单的正则表达式版本来换行文本：

function Wrap(src, maxLineLength) {
    return src.replace(new RegExp("(.{1,"+maxLineLength+"})", "g"), "$1<br/>rn");
}

虽然这包裹在字符上，而不是文字上。