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


Posted in Javascript onAugust 13, 2018

两个关键点

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

效果

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

注意

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

总结

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

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
vue实现文件上传功能
Aug 13 #Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 #Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 #Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 #Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 #Javascript
Vue实现左右菜单联动实现代码
Aug 12 #Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
浅析php创建者模式
2014/11/25 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
10个php函数实用却不常见
2015/10/13 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
bootstrap轮播图示例代码分享
2017/05/17 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
小学教师岗位职责
2013/11/25 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
仓库管理制度范本
2015/08/04 职场文书
员工给公司的建议书
2019/06/24 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript