javascript - 将 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></div><div><pre>

我试过了 ：

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

部分工作：每一行都改变了，我松开了我的块。

<pre>换行符是否存储为 \r ？\n ? （所有操作系统？所有浏览器？）
什么是一个好的正则表达式来做到这一点？
你有什么其他的方法可以建议我继续吗？

Answer 1

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

2. 修剪每一行

3. 将每一行包装在<div><pre>标签中

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

});

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

Answer 3

你可以使用jQuery 的 wrap函数

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