最終效果如圖html
<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+?)(?:\n\s*?(.+?=".*?"))/g, '$1 $2') } function formatXml(text) { //去掉多餘的空格 text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) { return name + ' ' + props.replace(/\s+(\w+=)/g, " $1"); }).replace(/>\s*?</g, ">\n<"); //把註釋編碼 text = text.replace(/\n/g, '\r').replace(/<!--(.+?)-->/g, function ($0, text) { var ret = '<!--' + escape(text) + '-->'; //alert(ret); return ret; }).replace(/\r/g, '\n'); //調整格式 var rgx = /\n(<(([^\?]).+?)(?:\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 = '\n' + prefix + all; return ret; }); var prefixSpace = -1; var outputText = output.substring(1); //alert(outputText); //把註釋還原並解碼,調格式 outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) { //alert(['[',prefix,']=',prefix.length].join('')); if (prefix.charAt(0) == '\r') prefix = prefix.substring(1); text = unescape(text).replace(/\r/g, '\n'); var ret = '\n' + 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>