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源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
js微信分享API
Oct 11 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
vue自定义组件实现双向绑定
Jan 13 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中养成7个面向对象的好习惯
2010/01/28 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
最新创业融资计划书
2014/01/19 职场文书
党员党性分析材料
2014/02/17 职场文书
装配出错检讨书
2014/09/23 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android