将 pre 转换为 div

Question

您将如何继续对此进行转换：

<pre>
key 1 value 1

key 2 value 2
value 2.2


key 3 value 3
value 3.1
value 3.2
value 3.3

key 4 value4.1 value4.5

</pre>

对此：

<div><pre>
key 1 value 1
</pre></div><div><pre>
key 2 value 2
value 2.2
</pre></div><div><pre>
key 3 value 3
value 3.1
value 3.2
value 3.3
</pre></div><div><pre>
key 4 value4.1 value4.5

</pre></div>

即：将连续空行*s*（可能包含空格/制表符和多个换行符）替换为< /pre>

我尝试过：

var txt = $('pre').text();
txt = txt.replace(/(\r\n|\n|\r)/gm, "</pre></div><div><pre>");
$('div#test').append(txt);

部分工作：每行都更改了，我失去了块。

 换行符是否存储为 \r ？ \n？ （所有操作系统？所有浏览器？）

什么是一个好的正则表达式来做到这一点？

您建议我继续采用其他方式吗？

Answer 1

1. 解析文本，获得文本行列表

2. 修剪每一行

3. 换行在

   标签
   

4. 将结果连接在一起

我会在解析文本后完全删除预先存在的 pre 元素。因此，它不是“转换”，而是提取文本并完全构建一个不同的元素。

Answer 2

这对我来说就是这样。它可能会更好：

$(document).ready(function(){

var lines = $('pre').html().split(/\n\s*\n/);
$('pre').remove();
    for(i = 0; i < lines.length; i++){
        if($.trim(lines[i].length) > 0){
            var preDiv = $('<pre />');
            var keyDiv = $('<div />');
            preDiv.append(keyDiv);
            keyDiv.html(lines[i]);
            $('body').append(preDiv);
        }
    }

});

它不解决任何空白。您可以使用 keyDiv.html("key" + $.trim(lines[i])) 行中的 trim() 删除它

Answer 3

您可以使用jQuery的wrap函数

$('pre').text($.trim($(this).text()).wrap('<div></div>');