js格式化xml并高亮显示关键字

29次阅读

共计 2345 个字符，预计需要花费 6 分钟才能阅读完成。

w3school XML DOM – DOMParser 对象

DOMParser 解析 XML 标记来创建一个文档。
构造函数
new DOMParser()
DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法：
var doc = (new DOMParser()).parseFromString(text)
IE 不支持 DOMParser 对象。相反，它支持使用 Document.loadXML() 的 XML 解析。
DOMParser.parseFromString()
解析 XML 标记
语法
parseFromString(text, contentType)
text 参数是要解析的 XML 标记。
contentType 是文本的内容类型。可能是 “text/xml”、”application/xml” 或 “application/xhtml+xml” 中的一个。注意，不支持 “text/html”。
实战
js
// 格式化 xml 高亮显示
formatXml = function (content) {
let xml_doc = null;
const formatContent = content.replace(/[\n\r]/g, “”);
try {
xml_doc = (new DOMParser()).parseFromString(formatContent, ‘text/xml’);
} catch (e) {
return false;
}

function build_xml(list, element, level) {
let t = [];

/*level 节点层级。方便前面添加多少个空格缩进 */
for (let i = 0; i < level; i++) {
t.push(‘ ‘);
}

t = t.join(“”);

list.push(t + ‘<’ + element.nodeName + ‘>\n’);
for (let i = 0; i < element.childNodes.length; i++) {
const childLevel = level + 1;
let childItem = element.childNodes[i];
let nodeName = childItem.nodeName;
if (nodeName === ‘#text’) {
continue;
}

if (childItem.childNodes.length <= 1) {
let value = ”;
if (childItem.childNodes.length === 1) {
value = childItem.childNodes[0].nodeValue;
}

// 将 html 标签转化成实体
value = value ? value.replace(/&/g, ‘&’).replace(/</g, ‘<’).replace(/>/g, ‘>’) : ”;

let value_color = !isNaN(Number(value)) ? ‘code-number’ : ‘code-string’;

let value_txt = ‘’ + value + ‘’;
let item = t + ‘ <’ + nodeName +
‘>’ + value_txt + ‘</’ + nodeName + ‘>\n’;
list.push(item);
} else {
build_xml(list, element.childNodes[i], childLevel);
}
}
list.push(t + ‘</’ + element.nodeName + ‘>\n’);
}