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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
javascript 有用的脚本函数
May 07 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
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
全国中波电台频率表
2020/03/11 无线电
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
python笔记:mysql、redis操作方法
2017/06/28 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python如何实现邮件功能
2020/05/27 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
舞蹈教育学专业求职信
2014/06/29 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
房屋过户委托书范本
2014/10/07 职场文书
坎儿井导游词
2015/02/09 职场文书
公司规章制度范本
2015/08/03 职场文书
如何写好竞聘报告
2019/04/03 职场文书
python实现局部图像放大
2021/11/17 Python
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android