在HTML Div中显示XML [英] Display XML in HTML Div
问题描述
我想在HTML页面中显示XML树结构。
XML：
< 员工 >
< employee id = 1 > ;
< firstName > OneFirstName < / firstName > ;
< lastname > OneSecondName < / lastname >
< / employee >
< employee id = 2 > ;
< firstname > TwoFirstName < / firstname > ;
< lastname > TwoSecondName < / lastname >
< / employee >
< / employees >
XML的字符串版本来自WCF服务，并使用Angular绑定进行渲染，如下所示。
我尝试过但很少有事情对我不起作用。我可能会遗漏一些东西并寻找缺失的链接。
http://tiku.io/questions/2496035/how-to-display-xml-data-in-div [ ^ ]
http://www.experts-exchange.com/ Programming / Languages / .NET / ASP.NET / Q_23513630.html [ ^ ]
http://stackoverflow.com/questions/10498188/how-to-display-xml-data-in-div [ ^ ]
以上链接提供了两种显示XML的方法：
1-使用htmlEntities（...）进行HTML转换，替换字符，例如<，> ;到他们的HTML版本。试过这个，它显示了XML，但是缩进和间距丢失了。所有内容都排成一行，而不是格式化为XML。
2.使用vkbeautify.js库进行HTML转换。试过这个，它在警告对话框中给出了正确的格式。但是，在主页面中，只有XML标记值以连续的方式显示。这里的缩进就丢失了。
请在下面找到代码。我用简单的记事本来创建它。
注意：从
下载vkbeautify.0.99.00.beta.js https://code.google.com/p/vkbeautify/downloads/list [ ^ ]
代码：index.html
< html >
< title >
< h1 > HTML Javascript页面< / h1 >
< / title >
< head >
< script type = text / javascript src = vkbeautify.0.99.00.beta.js > < / script >
< / head >
< 正文 >
< h1 > 员工< / h1 >
< 按钮 type = 按钮 onclick < span class =code-keyword> = displayXml（） > 显示员工xml。< / button >
< hr / >
< p id = < span class =code-keyword> empDetails > < / p >
< < span class =code-leadattribute> script >
var xmlString =< 员工 > ;
xmlString = xmlString +< employee id =' 1' > ;
xmlString = xmlString +< firstName > OneFirstName < / firstName > ; ;
xmlString = xmlString +< lastname > OneSecondName < / lastname > ; ;
xmlString = xmlString +< / employee > ;
xmlString = xmlString +< employee id =' 2' > ;
xmlString = xmlString +< firstname > TwoFirstName < / firstname > ; ;
xmlString = xmlString +< lastname > TwoSecondName < / lastname > ; ;
xmlString = xmlString +< / employee > ;
xmlString = xmlString +< / employees > ;
函数displayXml（）{
document.getElementById（'empDetails'）。innerHTML = xmlString;
};
函数htmlEntities（str）{
var htmlString = String（str）.replace（/& / g，'& amp;'）。replace（/ < / g， '& lt;'）。replace（/ > / g，'& gt;'）。 replace（// g，'& quot;'）;
返回htmlString;
}
函数displayXml（）{
// xml的正常显示
document.getElementById（'empDetails'）。innerHTML = xmlString;
alert（正常显示：\ n+ xmlString）;
//仅HTML转换
var htmlString = htmlEntities（x mlString）;
document.getElementById（'empDetails'）。innerHTML = htmlString;
alert（HTML格式化显示：\ n+ htmlString）;
//使用vkbeautify
var beautifyHtmlString = vkbeautify.xml（xmlString）;
document.getElementById（'empDetails'）。innerHTML = beautifyHtmlString;
alert（VKbeautify display：\ n+ beautifyHtmlString）;
};
< / script >
< / body >
< / html >
提前致谢!!!
请参阅我对该问题的评论。你需要使用字符实体来转义HTML字符。
请参阅：
http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript [ ^ ]，
http://jsfiddle.net/E3EqX/13 [ ^ ]，
http://stackoverflow.com/questions/5499078/fastest-method-to-escape-html-tags-as-html-entities [ ^ ]。
-SA
< pre lang = xml > {{xmlString}} < / pre > 其中xmlString是XML的字符串表示形式。
使用< pre lang = xml > {{xmlString}}标记，然后使用
var beautifyHtmlString = vkbeautify.xml（x mlString）;
document .getElementById（' empFormatted').appendChild( document .createTextNode（beautifyHtmlString））;你把vkbeautify的输出放在哪里......
I would like to display a XML tree structure as it is in the HTML page.
XML:
<employees>
<employee id="1">
<firstName>OneFirstName</firstName>
<lastname>OneSecondName</lastname>
</employee>
<employee id="2">
<firstname>TwoFirstName</firstname>
<lastname>TwoSecondName</lastname>
</employee>
</employees>
The string version of XML comes from a WCF service and rendered using the Angular binding such as below.
Few things I have tried and didn't work for me. May I am missing something and looking for the missing link.
http://tiku.io/questions/2496035/how-to-display-xml-data-in-div[^]
http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_23513630.html[^]
http://stackoverflow.com/questions/10498188/how-to-display-xml-data-in-div[^]
The above links suggest two approaches displaying the XML:
1- HTML conversion using htmlEntities(...) which replaces characters such as <, > to their HTML version. Tried this and it shows XML, however indentation and spacing is lost. Everything comes in a line and not formatted as XML.
2. HTML conversion using vkbeautify.js library. Tried this and it gives proper formatting in the alert dialog. However, in the main page only XML tag values are displayed in a continuous fashion. Here indentation is lost.
Please find below the code. I have used simple notepad to create it.
NOTE: download vkbeautify.0.99.00.beta.js from
https://code.google.com/p/vkbeautify/downloads/list[^]
Code: index.html
<html>
<title>
<h1> HTML Javascript page </h1>
</title>
<head>
<script type="text/javascript" src="vkbeautify.0.99.00.beta.js"></script>
</head>
<body>
<h1>Employees</h1>
<button type="button" onclick="displayXml()">Display Employee xml.</button>
<hr/>
<p id="empDetails"></p>
<script>
var xmlString = "<employees>";
xmlString = xmlString +" <employee id='1'>";
xmlString = xmlString +" <firstName>OneFirstName</firstName>";
xmlString = xmlString +" <lastname>OneSecondName</lastname>";
xmlString = xmlString +" </employee>";
xmlString = xmlString +" <employee id='2'>";
xmlString = xmlString +" <firstname>TwoFirstName</firstname>";
xmlString = xmlString +" <lastname>TwoSecondName</lastname>";
xmlString = xmlString +" </employee>";
xmlString = xmlString +"</employees>";
function displayXml() {
document.getElementById('empDetails').innerHTML = xmlString;
};
function htmlEntities(str) {
var htmlString = String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
return htmlString;
}
function displayXml() {
// Normal display of xml
document.getElementById('empDetails').innerHTML = xmlString;
alert("Normal display: \n" + xmlString);
// HTML conversion only
var htmlString = htmlEntities(xmlString);
document.getElementById('empDetails').innerHTML = htmlString;
alert("HTML formatted display: \n" + htmlString);
// Using vkbeautify
var beautifyHtmlString = vkbeautify.xml(xmlString);
document.getElementById('empDetails').innerHTML = beautifyHtmlString;
alert("VKbeautify display: \n" + beautifyHtmlString);
};
</script>
</body>
</html>
Thanks in advance!!!
Please see my comments to the question. You need to escape HTML characters using character entities.
Please see:
http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript[^],
http://jsfiddle.net/E3EqX/13[^],
http://stackoverflow.com/questions/5499078/fastest-method-to-escape-html-tags-as-html-entities[^].
—SA
It worked for me by encapsulating the XML string in a<pre lang="xml">{{xmlString}}</pre>where xmlString is the string representation of the XML.
Use a<pre lang="xml">{{xmlString}}tag, then use
var beautifyHtmlString = vkbeautify.xml(xmlString); document.getElementById('empFormatted').appendChild(document.createTextNode(beautifyHtmlString));where you are putting the vkbeautify's output...
这篇关于在HTML Div中显示XML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
