Javascript格式化并高亮xml字符串的方法及注意事项
更新时间：2018年08月13日 09:02:03 作者：onlyfu
这篇文章主要介绍了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字符串，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
three.js中点对象(Point)和点材质(PointsMaterial)的具体使用
本文主要介绍了three.js中点对象(Point)和点材质(PointsMaterial)的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了javascript实现表格排序 编辑 拖拽 缩放的方法，效果非常不错，只是兼容性还有些问题，有待优化。2015-01-01
JavaScript 采用词法作用域（lexical scoping），函数执行依赖的变量作用域是由函数定义的时候决定，而不是函数执行的时候决定，通过本文给大家介绍JavaScript作用域链、执行上下文与闭包相关知识，感兴趣的朋友一起学习吧2016-02-02
本文给大家介绍的是是一款javascript弹出层特效,支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。2015-05-05
JavaScript中removeChild 方法开发示例代码
这篇文章主要介绍了JavaScript中removeChild 方法开发示例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要为大家详细介绍了JavaScript实现雪花飘落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
JS加ASP二级域名转向的代码...2007-05-05
这篇文章主要为大家详细介绍了js如何实现视频播放时屏幕显示水印的效果,文中的示例代码讲解详细,对我们深入掌握js有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
可以自定义广告的图片、链接、长、宽等。光标移到图片上会出现左右箭头，感兴趣的朋友可以尝试测试下2013-10-10
javascript实现动态导入js与css等静态资源文件的方法
这篇文章主要介绍了javascript实现动态导入js与css等静态资源文件的方法,基于回调函数实现该功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
最新评论