Преобразование InnerHTML в человекообразный код

Question

Я пишу код, чтобы взять html-код из div и поместить его в текстовое поле для редактирования. Если бы я просто взять код и сразу же распечатать его я получаю:

<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