Javascript 如何将HTML转换为有效的XHTML？_Javascript_Html_Xml_Parsing_Xhtml

Javascript 如何将HTML转换为有效的XHTML？

javascript html xml parsing

Javascript 如何将HTML转换为有效的XHTML？,javascript,html,xml,parsing,xhtml,Javascript,Html,Xml,Parsing,Xhtml,我有一个HTML字符串，在这个例子中 <img src="somepic.jpg" someAtrib="1" > 我正在尝试训练一个正则表达式的peice，它将匹配“img”节点，并在节点的末尾应用斜杠，使其看起来像 <img src="somepic.jpg" someAtrib="1" /> 本质上，这里的最终目标是确保节点是关闭的，打开的节点在HTML中有效，但在XML中无效。有没有任何正则表达式爱好者能够提供帮助？不要使用正则表达式，而是使用专用的解

我有一个HTML字符串，在这个例子中

<img src="somepic.jpg" someAtrib="1" >

我正在尝试训练一个正则表达式的peice，它将匹配“img”节点，并在节点的末尾应用斜杠，使其看起来像

<img src="somepic.jpg" someAtrib="1" />

本质上，这里的最终目标是确保节点是关闭的，打开的节点在HTML中有效，但在XML中无效。有没有任何正则表达式爱好者能够提供帮助？

不要使用正则表达式，而是使用专用的解析器。在JavaScript中，使用创建文档，然后使用：

var doc=new DOMParser（）.parseFromString（“”，'text/html'）；
var result=new XMLSerializer（）.serializeToString（doc）；
//结果:
//（无换行）
//

如果需要将其用于nodejs后端，则必须使用

npm i xmldom

这将做得非常好：

result=text.replace（/（/ig，“$1/>”）；

附录：如果（不太可能）代码包含包含尖括号的标记属性（这不是XML/XHTML附带的），那么这一个将做得更好：

result=text.replace（/（/ig，“$1/>”）；

您可以创建xhtml文档并导入/采用html元素。当然，Html字符串可以通过HTMLElement.innerHTML属性进行解析。关键是使用Document.importNode（）或Document.adoptNode（）方法进行转换 html节点到xhtml节点：

var di = document.implementation;
var hd = di.createHTMLDocument();
var xd = di.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
hd.body.innerHTML = '<img>';
var img = hd.body.firstElementChild;
var xb = xd.createElement('body');
xd.documentElement.appendChild(xb);
console.log('html doc:\n' + hd.documentElement.outerHTML + '\n');
console.log('xhtml doc:\n' + xd.documentElement.outerHTML + '\n');
img = xd.importNode(img); //or xd.adoptNode(img). Now img is a xhtml element
xb.appendChild(img);
console.log('xhtml doc after import/adopt img from html:\n' + xd.documentElement.outerHTML + '\n');

var di=document.implementation；
var hd=di.createHTMLDocument（）；
var xd=di.createDocument（'http://www.w3.org/1999/xhtml'，'html'，空）；
hd.body.innerHTML=''；
var img=hd.body.firstElementChild；
var xb=xd.createElement（'body'）；
xd.documentElement.appendChild（xb）；
log（'html文档：\n'+hd.documentElement.outerHTML+'\n'）；
log（'xhtml文档：\n'+xd.documentElement.outerHTML+'\n'）；
img=xd.importNode（img）；//或xd.adoptNode（img）。现在img是一个xhtml元素
xb.儿童（img）；
log（'从html导入/采用img后的xhtml文档：\n'+xd.documentElement.outerHTML+'\n'）；

输出应为：

html doc:
<html><head></head><body><img></body></html>

xhtml doc:
<html xmlns="http://www.w3.org/1999/xhtml"><body></body></html>

xhtml doc after import/adopt img from html:
<html xmlns="http://www.w3.org/1999/xhtml"><body><img /></body></html>

html文档：
xhtml文档：
从html导入/采用img后的xhtml文档：

Rob W的答案在chrome（至少29及以下）中不起作用，因为DOMParser不支持“text/html”类型，XMLSerializer为chrome中的html文档生成html语法（而不是xhtml）。

除了Rob W的答案，您还可以使用正则表达式提取正文内容：

var doc = new DOMParser().parseFromString('<img src="foo">', 'text/html');
var result = new XMLSerializer().serializeToString(doc);

/<body>(.*)<\/body>/im.exec(result);
result = RegExp.$1;

// result:
// <img src="foo" />

var doc=new DOMParser（）.parseFromString（“”，'text/html'）；
var result=new XMLSerializer（）.serializeToString（doc）；
/（.*）/im.exec（结果）；
结果=RegExp.$1；
//结果:
//

注意：

parseFromString（htmlString，'text/html'）；

将在IE9中抛出错误，因为text/html mimeType不是。但是可以与IE10和IE11一起使用。

不应该。html不是正则表达式，因此不适合正则表达式。请使用成熟的html解析器。@DavidB我理解您的意思。不过，我试图操纵“字符串”，这就是为什么我要问e问题：）原始标记无效，请求的XHTML标记也无效。您实际上是指“格式良好”和“无效”吗？@John正则表达式不能用于创建符合XHTML的文档的原因是它不可靠。例如，这个答案在

中已经失败了。输出是

。嘿，Rob。我想学习如何使用此技术。我正在运行Opera9、IE6和FF2（为了向后兼容，我的所有代码都必须在较旧的浏览器上运行），而上述代码不能正常工作。还需要包括哪些内容才能使其正常工作？能否发布完整的工作函数？谢谢。@ridgerunner它受IE9+、FF 12+（4+带DOMParser text/html polyfill）、Opera 11.6+（w/DOMParser polyfill）和Chrome（21）的支持有一个bug是

/>

未添加。很抱歉，我没有详细说明，我很忙。如果您愿意，请随时编辑我/您的答案，使其更完整。在Chrome（34）中仍然不起作用，因此这是一个很酷的技术，但如果您的用户正在使用Chrome，则不会。这似乎是一个比Rob W更好的解决方案。importNode（）有第二个参数，如果您还想使用regexp转换子元素w，您可以简单地使用doc.body.innterHTMLCorrecting自己。innerHTML将返回
而不是
。但是这个regexp模式工作得更好

var doc = new DOMParser().parseFromString('<img src="foo">', 'text/html');
var result = new XMLSerializer().serializeToString(doc);

/<body>(.*)<\/body>/im.exec(result);
result = RegExp.$1;

// result:
// <img src="foo" />