頁面格式化後臺的傳過來的

最終效果如圖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('<', '&lt;').replace('>', '&gt;');    }    //(3)將格式化好後的formatXml寫入頁面中    //$("#writePlace").html(resultXml.replace('<', '&lt;').replace('>', '&gt;'));    document.getElementById("writePlace").innerHTML = '<pre>' +resultXml + '<pre/>';</script>
相關文章
相關標籤/搜索