1.HTML中写入
<span class="formatXML label label-success">格式化</span>
2.绑定事件
$(".formatXML").off('click')
$(".formatXML").on('click',formatXML);
3.每次格式化之前保存原有XML,方便还原
function formatXML(){
var htmlObj= $(this).parent("td").next()
if( $(this).html()=="格式化"){
htmlObj.val(htmlObj.html()) //把值存在val属性里面,还原的时候直接取值
var val = escape2Html( htmlObj.html() )
var Str = parse_xml(val)
htmlObj.html(Str)
$(this).html("压缩")
}else{
htmlObj.html(htmlObj.val()) //直接取值
$(this).html("格式化")
}
}
4.处理XML格式的核心代码
var parse_xml = function(content) {
var xml_doc = null;
try {
xml_doc = (new DOMParser()).parseFromString(content.replace(/[\n\r]/g, ""), 'text/xml');
} catch (e) {
return false;
}
var flag=0
function build_xml(index, list, element) {
var t = []
for (var i = 0; i < flag; i++) {
t.push(' ');
}
t = t.join("");
list.push(t + '<<span class="code-key">'+ element.nodeName +'</span>><br/>');
for (var i = 0; i < element.childNodes.length; i++) {
var nodeName = element.childNodes[i].nodeName;
if (element.childNodes[i].childNodes.length===0){
var value_txt =""
var item = t + ' <<span class="code-key">' + nodeName +
'</span>>' + value_txt + '</<span class="code-key">' + nodeName + '</span>><br/>';
list.push(item);
} else if ( (element.childNodes[i].childNodes.length === 1 && element.childNodes[i].childNodes[0].nodeValue!=null)) {
var value = element.childNodes[i].childNodes[0].nodeValue;
var value_color = !isNaN(Number(value)) ? 'code-number' : 'code-string';
var value_txt = '<span class="'+ value_color +'">' + value + '</span>';
var item = t + ' <<span class="code-key">' + nodeName +
'</span>>' + value_txt + '</<span class="code-key">' + nodeName + '</span>><br/>';
list.push(item);
} else {
flag++
build_xml(++index, list, element.childNodes[i]);
flag--
}
}
list.push(t + '</<span class="code-key">'+ element.nodeName +'</span>><BR/>');
}
var list = [];
build_xml(0, list, xml_doc.documentElement);
return list.join("");
};
5.如果XML转义了,需要还原,可以使用下面的函数
//html标签反转义
function escape2Html(str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
6.最后再引入CSS样式
.code-string{color:#993300;}
.code-number{color:#cc00cc;}
.code-boolean{color:#000033;}
.code-null{color:magenta;}
.code-key{color:#003377;font-weight:bold;}
7.最后报文处理效果如下,样式可以在第6步中修改
0.欢迎交流讨论