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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
javascript实现时钟动画
Dec 03 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
反对四风问题自我剖析材料
2014/09/29 职场文书
2014年调度员工作总结
2014/11/19 职场文书
研究生简历自我评
2015/03/11 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
世界文化遗产导游词
2019/08/07 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技