Javascript格式化并高亮xml字符串的方法及注意事项

两个关键点

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

关于使用DOMParser

此方法目前在IE9以上和其它浏览器里都是支持的，所以这里不在写关于IE9以下不支持的情况, 具体的使用请跳转

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

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('    ');
    }
    t = t.join("");
    list.push(t + '<<span class="code-key">'+ element.nodeName +'</span>>\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 = '<span class="'+ value_color +'">' + value + '</span>';
        let item = t + '    <<span class="code-key">' + nodeName +
          '</span>>' + value_txt + '</<span class="code-key">' + nodeName + '</span>>\n';
        list.push(item);
      } else {
        build_xml(++index, list, element.childNodes[i]);
      }
    }
    list.push(t + '</<span class="code-key">'+ element.nodeName +'</span>>\n');
  }
  let list = [];
  build_xml(0, list, xml_doc.documentElement);
  return list.join("");
};

css

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

效果

注意

DOMParser在解析xml时，如果xml字符串里有些特殊的字符，解出来的树节点有些是不需要的，会倒置遍历节点失败。

总结

以上所述是小编给大家介绍的Javascript格式化并高亮xml字符串，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • json格式化/压缩工具 Chrome插件扩展版

    安装方法:用chrome浏览器访问 https://chrome.google.com/extensions/detail/pjkoglpbigbjijmncfkcpkcpddnelgbm?hl=zh-cn [json格式化/压缩]工具 chrome下安装 :) 1.建一个新的文件夹 2.建一个名为 manifest.json的文件 3.打开这个 manifest.json文件,可以理解为配置文件 :) 包含以下内容 复制代码 代码如下: { "name": "My Firs

  • 如何在JS中实现相互转换XML和JSON

    开发中有时候会遇到XML和JSON相互转换,要求在JS中使用,网上找了好多,竟然每一个好用的,要么缺胳膊少腿,要么词不达意,太没天理了,果断自己实现一个. JSON与XML的区别比较 1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. XML使用DTD(document type definition)文档类

  • 如何使用Javascript正则表达式来格式化XML内容

    使用得是Emeditor ,在看XML文档时,总是因为格式混乱而看不清.这个是一个Emeditor宏来自动格式化XML.下载:formatXml.rar(1,021.00 bytes)下面这段是这个网页版的javascript格式化XML的代码. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>    <meta http-

  • JSON格式化输出

    今天有个需求是对输出的JSON进行格式化 首先想到的就是jsBeautifier之类的小插件 搜索了一番看到有一位朋友回答JSON.stringify可以输出格式化的JSON字符串 复制代码 代码如下: JSON.stringify(jsObj, null, "\t"); // 缩进一个tab JSON.stringify(jsObj, null, 4);    // 缩进4个空格 唔,不错 PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用: 在线J

  • js实现最短的XML格式化工具实例

    js实现最短的XML格式化工具实例

    本文实例讲述了js实现最短的XML格式化工具的方法.分享给大家供大家参考.具体如下: 这是用 E4X 实现最短的 XML 格式化工具.可惜 IE 至今不支持这个标准特性... 请在 Firefox 或 Chrome 下运行! 1.代码如下: 复制代码 代码如下: <html>   <head>     <title>Indent XML</title>     <script language="JavaScript" type=&

  • JavaScript格式化json和xml的方法示例

    本文实例讲述了JavaScript格式化json和xml的方法.分享给大家供大家参考,具体如下: 格式化json实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js格式化json的方法</title> </head> <body> <!--格式化后的json写入的位

  • javascript格式化json显示实例分析

    本文实例讲述了javascript格式化json显示方法.分享给大家供大家参考.具体分析如下: 将json对象或者json字符串格式化方便在网页上限制 var formatJson = function(json, options) { var reg = null, formatted = '', pad = 0, PADDING = ''; //one can also use '\t' or a different number of spaces // optional settings

  • Json.net日期格式化设置方式

    Json.net默认的时间格式化后带T,不符合一般的业务要求,重新设置JSON.NET的默认日期格式化方式,代码如下: /// <summary> /// Json.net默认转换设置 /// </summary> private static void DefaultJsonConvertSetting() { JsonSerializerSettings setting = new JsonSerializerSettings(); JsonConvert.DefaultSet

  • js实现的xml对象转json功能示例

    本文实例讲述了js实现的xml对象转json功能.分享给大家供大家参考,具体如下: 支持无限级别xml结构对象转json,并且支持任意标签属性转json(兼容ie8等浏览器) xml字符串转xml对象: function loadXml(str) { if (str == null) { return null; } var doc = str; try{ doc = createXMLDOM(); doc.async = false; doc.loadXML(str); }catch(e){

  • 详谈表单格式化插件jquery.serializeJSON

    前言 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交. 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦.接下来介绍的插件将解决这个问题. 关于serializeJSON 使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON() 方法来序列化form表单的数据成JS对象. 使用 只需要在jQuery或者Zepto时候引入即可

随机推荐