如何将HTML转换为有效的XHTML?

问题描述 投票:6回答:5

我有一个HTML字符串,在这个例子中,它看起来像

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

[我正在尝试锻炼与'img'节点匹配的正则表达式,并在节点的末端加上斜杠,使其看起来像。

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

基本上,这里的最终目标是确保关闭节点,打开的节点在HTML中有效,但在XML中显然无效。是否有正则表达式的爱好者可以提供帮助?

javascript html xml parsing xhtml
5个回答
15
投票
不使用正则表达式,而是专用的解析器。在JavaScript中,使用DOMParser创建文档,然后使用DOMParser进行序列化:

XMLSerializer

如果需要将它与nodejs后端一起使用,则必须使用XMLSerializervar doc = new DOMParser().parseFromString('<img src="foo">', 'text/html');
var result = new XMLSerializer().serializeToString(doc);
// result:
// <html xmlns="http://www.w3.org/1999/xhtml"><head></head><body> (no line break)
// <img src="foo" /></body></html>

3
投票
您可以创建xhtml文档并导入/采用html元素。HTML字符串可以通过HTMLElement.innerHTML属性进行解析。关键是使用Document.importNode()或Document.adoptNode()方法进行转换html节点到xhtml节点:

xmldom

输出应为:

npm i xmldom

Rob W的答案在chrome中不起作用(至少29及以下),因为DOMParser不支持'text / html'类型,并且XMLSerializer为chrome中的html文档生成html语法(非xhtml)。

2
投票
除了Rob W的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'); ,您还可以使用RegEx提取主体内容:

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>

注意:answer将在IE9中引发错误,因为text / html mimeType不是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" /> 。虽然可以与IE10和IE11一起使用。


1
投票
这将做得很好:

parseFromString(htmlString, 'text/html');

附录:在(不太可能的)事件中,您的代码包含带有尖括号的标记属性(这不是有效的XML / XHTML BTW),那么这将做得更好:

supported in IE9


0
投票
您为什么要在浏览器DOM中修复XHTML无效的HTML文档?

已经提供并解析了它,并且您已经有了DOM。无效/格式错误的文档将引起的任何解析错误都已经发生,并且不会是将其修复的DOM正则表达式。

[另外,请记住,几乎所有文档都被解析为HTML标记汤。如果您无法在服务器端修复文档,则只需在客户端忽略其有效性/良好性即可。

© www.soinside.com 2019 - 2024. All rights reserved.