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