最终效果如图
<nodes> <nodesensor> <nsid>0868334030095685JG02</nsid> <nodeid>0868334030095685</nodeid> <apid>123456789</apid> <sensortype>JG02</sensortype> <sdvalue>66</sdvalue> <unit> </unit> <update>2018-12-13 11:03:19</update> <longitude> </longitude> <latitude> </latitude> </nodesensor> <nodesensor> <nsid>0868334030095685JG01</nsid> <nodeid>0868334030095685</nodeid> <apid>123456789</apid> <sensortype>JG01</sensortype> <sdvalue>3.55</sdvalue> <unit>V</unit> <update>2018-12-13 11:03:19</update> <longitude> </longitude> <latitude> </latitude> </nodesensor> <nodesensor> <nsid>0868334030095685JG03</nsid> <nodeid>0868334030095685</nodeid> <apid>123456789</apid> <sensortype>JG03</sensortype> <sdvalue>-15</sdvalue> <unit> </unit> <update>2018-12-13 11:03:19</update> <longitude> </longitude> <latitude> </latitude> </nodesensor> <nodesensor> <nsid>086833403009568501</nsid> <nodeid>0868334030095685</nodeid> <apid>123456789</apid> <sensortype>01</sensortype> <sdvalue>0460042178905468</sdvalue> <unit> </unit> <update>2018-12-13 11:03:19</update> <longitude> </longitude> <latitude> </latitude> </nodesensor> </nodes>
网上的示例有些可以用,有些不可以用,但可用的也都是不显示的xml标签的,
因为没有对标签转义,所以显示不出来,另外还需要放在pre预格式化标签里,才能整齐的显示xml
<!--格式化后的xml写入的位置-->
<div id="writePlace"></div>
<script>
//格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
String.prototype.removeLineEnd = function () {
return this.replace(/(<.+?s+?)(?: s*?(.+?=".*?"))/g, '$1 $2')
}
function formatXml(text) {
//去掉多余的空格
text = ' ' + text.replace(/(<w+)(s.*?>)/g, function ($0, name, props) {
return name + ' ' + props.replace(/s+(w+=)/g, " $1");
}).replace(/>s*?</g, "> <");
//把注释编码
text = text.replace(/ /g, ' ').replace(/<!--(.+?)-->/g, function ($0, text) {
var ret = '<!--' + escape(text) + '-->';
//alert(ret);
return ret;
}).replace(/ /g, ' ');
//调整格式
var rgx = / (<(([^?]).+?)(?:s|s*?>|s*?(/)>)(?:.*?(?:(?:(/)>)|(?:<(/)2>)))?)/mg;
var nodeStack = [];
var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/' ) || (isFull1 == '/') || (isFull2 == '/');
//alert([all,isClosed].join('='));
var prefix = '';
if (isBegin == '!') {
prefix = getPrefix(nodeStack.length);
}
else {
if (isBegin != '/') {
prefix = getPrefix(nodeStack.length);
if (!isClosed) {
nodeStack.push(name);
}
}
else {
nodeStack.pop();
prefix = getPrefix(nodeStack.length);
}
}
var ret = ' ' + prefix + all;
return ret;
});
var prefixSpace = -1;
var outputText = output.substring(1);
//alert(outputText);
//把注释还原并解码,调格式
outputText = outputText.replace(/ /g, ' ').replace(/(s*)<!--(.+?)-->/g, function ($0, prefix, text) {
//alert(['[',prefix,']=',prefix.length].join(''));
if (prefix.charAt(0) == ' ')
prefix = prefix.substring(1);
text = unescape(text).replace(/ /g, ' ');
var ret = ' ' + prefix + '<!--' + text.replace(/^s*/mg, prefix) + '-->';
//alert(ret);
return ret;
});
//alert(outputText);
return outputText;
}
function getPrefix(prefixIndex) {
var span = ' ';
var output = [];
for (var i = 0; i < prefixIndex; ++i) {
output.push(span);
}
return output.join('');
}
//引用示例部分
//(1)创建xml格式或者从后台拿到对应的xml格式
var originalXml = '<nodes><nodesensor><nsid>0868334030095685JG02</nsid><nodeid>0868334030095685</nodeid><apid>123456789</apid><sensortype>JG02</sensortype><sdvalue>66</sdvalue><unit></unit><update>2018-12-13 11:03:19</update><longitude></longitude><latitude></latitude></nodesensor><nodesensor><nsid>0868334030095685JG01</nsid><nodeid>0868334030095685</nodeid><apid>123456789</apid><sensortype>JG01</sensortype><sdvalue>3.55</sdvalue><unit>V</unit><update>2018-12-13 11:03:19</update><longitude></longitude><latitude></latitude></nodesensor><nodesensor><nsid>0868334030095685JG03</nsid><nodeid>0868334030095685</nodeid><apid>123456789</apid><sensortype>JG03</sensortype><sdvalue>-15</sdvalue><unit></unit><update>2018-12-13 11:03:19</update><longitude></longitude><latitude></latitude></nodesensor><nodesensor><nsid>086833403009568501</nsid><nodeid>0868334030095685</nodeid><apid>123456789</apid><sensortype>01</sensortype><sdvalue>0460042178905468</sdvalue><unit></unit><update>2018-12-13 11:03:19</update><longitude></longitude><latitude></latitude></nodesensor></nodes>';
//(2)调用formatXml函数,将xml格式进行格式化
var resultXml = formatXml(originalXml);
//alert(resultXml)
for (var i = 0; i < resultXml.length; i++) {
resultXml=resultXml.replace('<', '<').replace('>', '>');
}
//(3)将格式化好后的formatXml写入页面中
//$("#writePlace").html(resultXml.replace('<', '<').replace('>', '>'));
document.getElementById("writePlace").innerHTML = '<pre>' +resultXml + '<pre/>';
</script>