Javascript格式化并高亮xml字符串的方法及注意事項(xiàng)
兩個(gè)關(guān)鍵點(diǎn)
1.使用DOMParser解析xml
2.遞歸遍歷xml樹，按格式輸出每一個(gè)節(jié)點(diǎn)
關(guān)于使用DOMParser
此方法目前在IE9以上和其它瀏覽器里都是支持的，所以這里不在寫關(guān)于IE9以下不支持的情況, 具體的使用請(qǐng)?zhí)D(zhuǎn)
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時(shí)，如果xml字符串里有些特殊的字符，解出來(lái)的樹節(jié)點(diǎn)有些是不需要的，會(huì)倒置遍歷節(jié)點(diǎn)失敗。
總結(jié)
以上所述是小編給大家介紹的Javascript格式化并高亮xml字符串，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
對(duì)比分析Django的Q查詢及AngularJS的Datatables分頁(yè)插件
通過本文給大家對(duì)比分析了Django的Q查詢及AngularJS的Datatables分頁(yè)插件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
JavaScript開發(fā)人員的10個(gè)關(guān)鍵習(xí)慣小結(jié)
還在一味沒有目的的編寫JavaScript代碼嗎？那么你就OUT了！讓我們一起來(lái)看看小編為大家搜羅的JavaScript開發(fā)人員應(yīng)該具備的十大關(guān)鍵習(xí)慣吧2014-12-12
Javascript使用function創(chuàng)建類的兩種方法(推薦)
下面小編就為大家?guī)?lái)一篇Javascript使用function創(chuàng)建類的兩種方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-11-11
every?和?some?都是數(shù)組迭代方法,都可以遍歷數(shù)組,這篇文章主要介紹了JS中some和every的區(qū)別和用法,需要的朋友可以參考下2023-05-05
本文淺析一下為什么Map（和WeakMap）在處理大量DOM節(jié)點(diǎn)時(shí)特別有用，文中的代碼示例介紹的非常詳細(xì)，感興趣的小伙伴可以借鑒閱讀2023-05-05
一個(gè)多瀏覽器支持的背景變暗的div并可拖動(dòng)提示窗口功能的代碼
兼容IE、Firefox、Opera前幾天在網(wǎng)上找了許多資料，看了不少兄弟的源碼，一直找不到合適的，要不就是拖動(dòng)有問題，要不就是不兼容Firefox，所以自已寫了一個(gè)，下面是代碼：2008-04-04
自動(dòng)完成的搜索框javascript實(shí)現(xiàn)
這篇文章主要介紹了自動(dòng)完成的搜索框javascript實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-02-02
觀察者模式（Observer Pattern）是一種行為型設(shè)計(jì)模式，它定義了一種一對(duì)多的依賴關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象，本文將帶你詳細(xì)了解JavaScript 觀察者模式，,需要的朋友可以參考下2023-05-05
微信小程序canvas繪制圓角base64圖片的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序canvas繪制圓角base64圖片的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例
這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09