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

解析文本，以便获得文本行列表
修剪每一行
将<div><pre>代码
将结果连接在一起

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

Answer 2

您可以使用jQuery's wrap功能

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

Answer 3

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

$(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（）删除它

将pre转换为div

3 个答案: