如何在與段落一起使用的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是一行中所需的字符數。

雖然現在我還有另一個問題，那是\\ n行不通的； 我也試過
。 如何在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/>\r\n");
}

雖然這是圍繞字符而不是文字。