VUE实现XML高亮和格式化
首先在公用方法中写入下面的方法,我这里是src/utils/index.jsexport function parse_xml(content) {let xml_doc = nulltry {xml_doc = (new DOMParser()).parseFromString(content.replace(/[\n\r\s]/g, ''), 'text/xml')...
·
- 首先在公用方法中写入下面的方法,我这里是src/utils/index.js
export function parse_xml(content) {
let xml_doc = null
try {
xml_doc = (new DOMParser()).parseFromString(content.replace(/[\n\r\s]/g, ''), 'text/xml')
} catch (e) {
return false
}
let flag = 0
function build_xml(index, list, element) {
let t = []
for (let i = 0; i < flag; i++) {
t.push(' ')
}
t = t.join('')
list.push(t + '<<span class="code-key">' + element.nodeName + '</span>><br/>')
for (let i = 0; i < element.childNodes.length; i++) {
const nodeName = element.childNodes[i].nodeName
if (element.childNodes[i].childNodes.length === 0) {
const value_txt = ''
const item = t + ' <<span class="code-key">' + nodeName +
'</span>>' + value_txt + '</<span class="code-key">' + nodeName + '</span>><br/>'
list.push(item)
} else if ((element.childNodes[i].childNodes.length === 1 && element.childNodes[i].childNodes[0].nodeValue != null)) {
const value = element.childNodes[i].childNodes[0].nodeValue
const value_color = !isNaN(Number(value)) ? 'code-number' : 'code-string'
const value_txt = '<span class="' + value_color + '">' + value + '</span>'
const item = t + ' <<span class="code-key">' + nodeName +
'</span>>' + value_txt + '</<span class="code-key">' + nodeName + '</span>><br/>'
list.push(item)
} else {
flag++
build_xml(++index, list, element.childNodes[i])
flag--
}
}
list.push(t + '</<span class="code-key">' + element.nodeName + '</span>><BR/>')
}
const list = []
build_xml(0, list, xml_doc.documentElement)
return list.join('')
}
-
在需要进行XML高亮文件中导入
import { parse_xml } from '@/utils'
-
给对应的参数赋值
this.formatData = parse_xml(xml)
-
最后在template中写入
<div v-html="formatData" />
-
样式中加入下面的代码
<style> .code-string{color:#993300;} .code-number{color:#cc00cc;} .code-boolean{color:#000033;} .code-null{color:magenta;} .code-key{color:#003377;font-weight:bold;} </style>
-
最后的效果如下
更多推荐
已为社区贡献5条内容
所有评论(0)