問題背景：表單長文本字段填寫無引入富文本編輯器，使用textarea輸入，打印表單時，將文本放至表格td內，無法保留textarea的內容格式。主要問題表現為：

①換行符變為空格展示，沒有換行顯示。

②多個空格變為單個空格顯示。

問題解決：

/**

* 格式化文本為html標簽

* contentId，需進行格式轉換的元素ID

**/

function formatText(contentId){

var content = $('#' + contentId);

content.each(function(){

var txt = $(this).text();

//多個空格變成單個空格顯示，所以需替換空格為?

txt = txt.replace(new RegExp(' ', 'g'), '?');

var j =0;

var span = document.createElement("span");

for(i=0;i

if(txt.charAt(i)=='\n'){

//以換行符做分割

var partTxt = txt.slice(j,i);

var p = document.createElement("p");

p.innerHTML = partTxt;

span.append(p);

//由于p標簽內容為空時，頁面不顯示空行，加一個

if(partTxt==''){

span.appendChild(document.createElement("br"));

}

j = i + 1;

}

}

var p_end = document.createElement("p");

p_end.innerHTML = txt.slice(j);

$(this).text('');

span.appendChild(p_end);

$(this).append(span);

});

}

繼續深入：在項目中有打印的需求，當文本內容過多時，需分頁顯示。這時就需要把文本切割為多個單行的p標簽文本，再去計算文本高度進行分頁。切割方法按照固定的文本長度進行截斷，元素高度屬性clientHeight。

/**

* 格式化文本為html標簽，并切割為多個單行p標簽文本

* contentId，需進行格式轉換的元素ID

**/

function formatText(contentId){

var content = $('#' + contentId);

content.each(function(){

var txt = $(this).text();

var j =0;

var span = document.createElement("span");

for(i=0;i

if(txt.charAt(i)=='\n'){

//以換行符做分割

var partTxt = txt.slice(j,i);

var outFlag = false;//溢出標識

for (var z = 0; z < partTxt.length; z++) {

//p標簽一行展示長度為31的字符

var startIndex = z * 31;//開始下標

var endIndex = (z + 1) * 31;//結束下標

if (endIndex > partTxt.length) {

endIndex = partTxt.length;

outFlag = true;

}

var pTxt = partTxt.slice(startIndex, endIndex);

pTxt = pTxt.replace(new RegExp(' ', 'g'), '?');

var p = document.createElement("p");

p.innerHTML = pTxt;

span.append(p);

if (outFlag) {

break;

}

}

//由于p標簽內容為空時，頁面不顯示空行，加一個

if(partTxt==''){

span.appendChild(document.createElement("br"));

span.appendChild(p);

}

j = i + 1;

}

}

var p_end = document.createElement("p");

p_end.innerHTML = txt.slice(j).replace(new RegExp(' ', 'g'), '?');

$(this).text('');

span.appendChild(p_end);

$(this).append(span.innerHTML);//去除span標簽

});

}

總結

以上是生活随笔為你收集整理的js把txt转为html,js格式化文本为html标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。