Question

我正在编写代码以从div获取html代码并将其放入文本框进行编辑。如果我只是接受代码并直接打印它，我得到：

<h1>hi</h1><p>Sloppy long one line</p><p>and so on</p>

这很难读，所以我想这样：

<h1>
hi
</h1>
<p>
Sloppy long one line
</p>
<p>
and so on
</p>

我有这个：

function add_code()
{
    var html= document.getElementById("body_visual_editor").innerHTML //Gets the code
    html= html.replace(/draggable="true"/g, ''); //Removes the draggable attributes that are added to the elements when returning the code to the div 
    html= html.replace(/id="autoid[0-9]+"/g, ''); ////Removes the auto generated ID's that are added to the elements when returning the code to the div
    html= html.replace(/</g, '\n<'); //Adds a line break before tags
    html= html.replace(/\n\n/g, '\n'); //Fixes glitch caused by previous line
    html= html.replace(/>(?!\n)/g, '>\n'); //Adds line break after tag
    document.getElementById("body_code_box").value= html.trim(); //Adds the code to the textarea for editing.
}

问题：

当我删除可拖动的属性时，它会在标记的末尾留下2个空格。

当我在标记之前添加换行符时，它会添加额外的换行符，即使已经有换行符，所以我需要html= html.replace(/\n\n/g, '\n')来删除它。

该修复在代码的开头留下了额外的换行符，所以我需要修剪来删除它。

它有效，但似乎非常草率。有没有更好的方法来写这个更简化和有效？请不要JQuery。

Answer 1

确定。我想我明白你想要的东西。

var text = document.getElementById("yourDiv").innerHTML;
var find = '<';
var re = new RegExp(find, 'g');
text = text.replace(re, '\n<');
find = '>';
var re = new RegExp(find, 'g');
text = text.replace(re, '>\n');

这是JSFiddle

Answer 2

奇怪的是，这个问题从未得到正确回答。所有需要做的就是用相对的实体名称替换HTML字符。

就像这样（运行摘录以查看其运行情况）：

let text = document.getElementById('raw').innerHTML,
find = '<',
re = new RegExp(find, 'g');
text = text.replace(re, '&lt;');

find = '>';
re = new RegExp(find, 'g');
text = text.replace(re, '&gt;');

document.getElementById('CodeOut').innerHTML = text;

<section id="raw">
<h1>hi</h1><p>Sloppy long one line</p><p>and so on</p>
</section>
<section id="Code" style="background-color:grey;color:#fff;padding:10px;">
<pre><code id="CodeOut"></code></pre>
</section>

将InnerHTML转换为人类可读代码

2 个答案: