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

①換行符變?yōu)榭崭裾故?#xff0c;沒有換行顯示。

②多個空格變?yōu)閱蝹€空格顯示。

問題解決：

/**

* 格式化文本為html標(biāo)簽

* contentId，需進(jìn)行格式轉(zhuǎn)換的元素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標(biāo)簽內(nèi)容為空時，頁面不顯示空行，加一個

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

});

}

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

/**

* 格式化文本為html標(biāo)簽，并切割為多個單行p標(biāo)簽文本

* contentId，需進(jìn)行格式轉(zhuǎn)換的元素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;//溢出標(biāo)識

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

//p標(biāo)簽一行展示長度為31的字符

var startIndex = z * 31;//開始下標(biāo)

var endIndex = (z + 1) * 31;//結(jié)束下標(biāo)

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標(biāo)簽內(nèi)容為空時，頁面不顯示空行，加一個

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標(biāo)簽

});

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。