jQuery静态方法parseXML使用和源码分析,Javascript格式化并高亮xml字符串的艺术及注意事项

Javascript格式化并高亮xml字符串

多少个关键点

 

而是是XML字符串,则在二种浏览器下就能够有所不一样,IE下能够直接行使LoadXML方法解析XML字符串,而在FF下则要采用DOMParser 对象的parseFromString() 方法即
var oParser=new DOMParser();
xmlDoc=oParser.parseFromString(xmlStr,”text/xml”);
为了在二种浏览器中能通用,笔者想到了javascritp的发生万分的管理方式,正是try…catch…

多个关键点

  1. 使用DOMParser解析xml
  2. 递归遍历xml树,按格式输出每五个节点

1.使用DOMParser解析xml
二.递归遍历xml树,按格式输出每三个节点

jQuery.parseXML( data )
接受3个格式特出的 XML 字符串,重返解析后的 XML 文书档案。

复制代码 代码如下:

有关利用DOMParser

此方法目前在IE9之上和任何浏览器里都以永葆的,所以那边不在写关于IE九以下不支持的状态,
具体的行使请跳转

关于使用DOMParser

格局 jQuery.parseXML() 使用浏览器原生的
XML 解析函数完成。

function toXML(strxml){
  try{
     xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
     xmlDoc.loadXML(strxml);
  }
  catch(e){
     var oParser=new DOMParser();
     xmlDoc=oParser.parseFromString(strxml,”text/xml”);
  }
  return xmlDoc;
jQuery静态方法parseXML使用和源码分析,Javascript格式化并高亮xml字符串的艺术及注意事项。}

Javascript代码

/**
 * 格式化xml
 * @param content
 * @returns {*}
 */
this.parse_xml = function(content) {
    let xml_doc = null;
    try {
        xml_doc = (new DOMParser()).parseFromString(content.replace(/[\n\r]/g, ""), 'text/xml');
    } catch (e) {
        return false;
    }

    function build_xml(index, list, element) {
        let t = [];
        for (let i = 0; i < index; i++) {
            t.push('&nbsp;&nbsp;&nbsp;&nbsp;');
        }
        t = t.join("");
        list.push(t + '&lt;'+ element.nodeName +'&gt;\n');
        for (let i = 0; i < element.childNodes.length; i++) {
            let nodeName = element.childNodes[i].nodeName;
            if (element.childNodes[i].childNodes.length === 1) {
                let value = element.childNodes[i].childNodes[0].nodeValue;
                let value_color = !isNaN(Number(value)) ? 'code-number' : 'code-string';
                let value_txt = '' + value + '';
                let item = t + '&nbsp;&nbsp;&nbsp;&nbsp;&lt;' + nodeName +
                    '&gt;' + value_txt + '&lt;/' + nodeName + '&gt;\n';
                list.push(item);
            } else {
                build_xml(++index, list, element.childNodes[i]);
            }
        }
        list.push(t + '&lt;/'+ element.nodeName +'&gt;\n');
    }

    let list = [];
    build_xml(0, list, xml_doc.documentElement);

    return list.join("");
};

此形式近来在IE9以上和其它浏览器里都是支撑的,所以这里不在写关于IE玖以下不帮助的情事,
具体的利用请跳转

亚洲必赢官网 ,在 IE 玖+ 和别的浏览器中,会选取 DOMParser
对象解析; 在 IE 9 以下的浏览器中,则利用 ActiveXObject
对象解析

[Ctrl+A 全选
注:如需引进外部Js需刷新本事试行]

css

.code-string{color:#993300;}
.code-number{color:#cc00cc;}
.code-boolean{color:#000033;}
.code-null{color:magenta;}
.code-key{color:#003377;font-weight:bold;}

源码分析

看,不管在ie依然ff中都弹出了1400啊!!

效果

亚洲必赢官网 1

Javascript代码

// Cross-browser xml parsing
    parseXML: function( data ) {
        var xml, tmp;
        try {
            if ( window.DOMParser ) { // Standard
                tmp = new DOMParser();
                xml = tmp.parseFromString( data , "text/xml" );
            } else { // IE
                xml = new ActiveXObject( "Microsoft.XMLDOM" );
                xml.async = "false";
                xml.loadXML( data );
            }
        } catch( e ) {
            xml = undefined;
        }
        if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
            jQuery.error( "Invalid XML: " + data );
        }
        return xml;
    },

复制代码 代码如下:

注意

DOMParser在解析xml时,假使xml字符串里有点异样的字符,解出来的树节点有个别是没有供给的,会倒置遍历节点退步。

/**
 * 格式化xml
 * @param content
 * @returns {*}
 */
this.parse_xml = function(content) {
  let xml_doc = null;
  try {
    xml_doc = (new DOMParser()).parseFromString(content.replace(/[\n\r]/g, ""), 'text/xml');
  } catch (e) {
    return false;
  }

  function build_xml(index, list, element) {
    let t = [];
    for (let i = 0; i < index; i++) {
      t.push('    ');
    }
    t = t.join("");
    list.push(t + '<'+ element.nodeName +'>\n');
    for (let i = 0; i < element.childNodes.length; i++) {
      let nodeName = element.childNodes[i].nodeName;
      if (element.childNodes[i].childNodes.length === 1) {
        let value = element.childNodes[i].childNodes[0].nodeValue;
        let value_color = !isNaN(Number(value)) ? 'code-number' : 'code-string';
        let value_txt = '' + value + '';
        let item = t + '    <' + nodeName +
          '>' + value_txt + '</' + nodeName + '>\n';
        list.push(item);
      } else {
        build_xml(++index, list, element.childNodes[i]);
      }
    }
    list.push(t + '</'+ element.nodeName +'>\n');
  }
  let list = [];
  build_xml(0, list, xml_doc.documentElement);
  return list.join("");
};

率先针对IE(玖之下)和W3C标准开始展览区分管理,对于W3C浏览器来说采取职业的解析对象DOMParser,下边针对此目的进行增添

function FormatToXml(strXml){
var isIE = function(){
  var IE = /msie/i.test(navigator.userAgent);
  return IE;
}
var Exc = function(){
  var XmlDoc = null;
  if (isIE())
  {
   XmlDoc = new ActiveXObject(“Microsoft.XMLDOM”); 
   XmlDoc.loadXML(strXml);
  }else{
   //FireFox2.0、Safari2.0
   XmlDoc = (new DOMParser()).parseFromString(strXml, “text/xml”);
  }
  return XmlDoc;
}
return Exc();
}

最后

些方法已用于YuiAPI

css

//DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
//要使用 DOMParser,使用不带参数的构造函数来实例化它,然后调用其 parseFromString() 方法:

var doc = (new DOMParser()).parseFromString(text)

parseFromString定义如下

//text 参数是要解析的 XML 标记
//contentType 是文本的内容类型。可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意,不支持 "text/html"

parseFromString(text, contentType)

功能是同样的,都以为了在ie和ff中拍卖xml字符串的分析难点。可是在无忧上稍加人说xml字符串要有<?xml version=”一.0″ encoding=”gb231二”?>,可本身测试后若有xml version=”壹.0″ encoding=”gb231二”?>,解析结果差异样,所以本人上边的事例未有加这一个字符。 

.code-string{color:#993300;}
.code-number{color:#cc00cc;}
.code-boolean{color:#000033;}
.code-null{color:magenta;}
.code-key{color:#003377;font-weight:bold;}

IE采取的ActiveXObject对象解析xml,那么些一定于 IE
的方法分析钦赐的 XML 文本串,然后在现阶段文书档案对象中营造1棵 DOM
节点树,而丢掉在此以前设有于文书档案中的任何节点。

你只怕感兴趣的稿子:

  • vue.js落成价格格式化的措施
  • JS使用正则调节用户输入银行卡号及格式化
  • springmvc fastjson
    反系列化时间格式化方法(推荐)
  • ABP入门体系之Json格式化
  • js时间戳格式化成日期格式的三种主意介绍
  • JS操作XML实例总括(加载与解析XML文件、字符串)
  • JS解析XML文件和XML字符串详解
  • js字符串转变来xml对象并动用本事解读
  • js
    加载并解析XML字符串的代码
  • Javascript格式化并高亮xml字符串的秘技及注意事项

效果

其一艺术在象征 HTML
文书档案的Document对象上并不设有。在调用 loadXML()
在此以前,日常成立二个新的、空的 Document对象来保存解析的剧情:

亚洲必赢官网 2

var doc = new ActivexObject ("MSXML2.DOMDocument");
doc.loadXML(markup);

注意

IE玖以下浏览器解析后赶回的是Document对象
战败了此目的为null

DOMParser在解析xml时,假使xml字符串里多少独具匠心的字符,解出来的树节点有个别是没有要求的,会倒置遍历节点战败。

IE9以上的分析退步会报错推行catch语句把xml赋值为undefined

总结

在 IE 以外的浏览器中,假如条分缕析败北,方法
parseFromString()
不会抛出其它至极,只会回去多个包涵了错误消息的文书档案对象,如下所示:

上述所述是笔者给大家介绍的Javascript格式化并高亮xml字符串,希望对大家全数协助,假使大家有别的疑问请给自家留言,笔者会及时回复我们的。在此也格外感激大家对台本之家网址的支撑!

<parsererror xmlns="http:// www.mozilla.org/newlayout/xml/parsererror.xml">
(error description)
<sourcetext>(a snippet of the source XML)</sourcetext>
</parsererror>

你或者感兴趣的篇章:

  • vue.js达成价格格式化的方法
  • JS使用正则调节用户输入银行卡号及格式化
  • springmvc fastjson
    反系列化时间格式化方法(推荐)
  • ABP入门体系之Json格式化
  • js时间戳格式化成日期格式的有余方法介绍
  • JS操作XML实例总计(加载与解析XML文件、字符串)
  • JS解析XML文件和XML字符串详解
  • js字符串转变来xml对象并应用本事解读
  • js
    加载并解析XML字符串的代码
  • javascript解析xml字符串的函数

基于此番上边就用了多少个度量尺度核查是否解析成功

if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
            jQuery.error( "Invalid XML: " + data );
}

1.xml转换为false
 举例ie玖解析退步是

2.xml.documentElement能够转换为false
 针对IE低版本

三.parsererror成分存在  针对非IE

满足放肆一条就能够调用error方法告诉开辟者XML无效,最后回来解析后的xml文书档案

网站地图xml地图