js格式化文本为html标签

问题背景：表单长文本字段填写无引入富文本编辑器，使用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<txt.length;i++){
            if(txt.charAt(i)=='\n'){
                //以换行符做分割
                var partTxt = txt.slice(j,i);
                var p = document.createElement("p");
                p.innerHTML = partTxt;
                span.append(p);
                //由于p标签内容为空时，页面不显示空行，加一个<br>
                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<txt.length;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'),  '&nbsp;');
                    var p = document.createElement("p");
                    p.innerHTML = pTxt;
                    span.append(p);
                    if (outFlag) {
                        break;
                    }
                }
                //由于p标签内容为空时，页面不显示空行，加一个<br>
                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'),  '&nbsp;');
        $(this).text('');
        span.appendChild(p_end);
        $(this).append(span.innerHTML);//去除span标签
    });
}

参考文章：js实现html表格<td>标签中带换行的文本显示出换行效果