页面格式化后台的传过来的

最终效果如图

<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>

posted @ 2018-12-13 15:52  晨冬之雪  阅读(236)  评论(0编辑  收藏  举报
百度