我有一个HTML字符串,在这个例子中它看起来像:
<img src="somepic.jpg" someAtrib="1" >
我正在尝试编写一个正则表达式,以匹配“img”节点并在节点末尾应用斜杠,使其看起来像这样。
<img src="somepic.jpg" someAtrib="1" />
本质上,这里的最终目标是确保节点被关闭,虽然在HTML中开放节点是有效的,但在XML中却不是。有没有正则表达式专家可以提供帮助?
我有一个HTML字符串,在这个例子中它看起来像:
<img src="somepic.jpg" someAtrib="1" >
我正在尝试编写一个正则表达式,以匹配“img”节点并在节点末尾应用斜杠,使其看起来像这样。
<img src="somepic.jpg" someAtrib="1" />
本质上,这里的最终目标是确保节点被关闭,虽然在HTML中开放节点是有效的,但在XML中却不是。有没有正则表达式专家可以提供帮助?
不要使用正则表达式,而是使用专用的解析器。在JavaScript中,使用DOMParser
创建文档,然后使用XMLSerializer
对其进行序列化:
var 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>
如果你需要在Node.js后端使用这个,你必须使用xmldom。运行npm i xmldom
即可安装。
您可以创建一个xhtml文档并导入/采用html元素。 当然,可以通过HTMLElement.innerHTML属性解析HTML字符串。 关键点是使用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 an xhtml element
xb.appendChild(img);
console.log('xhtml doc after import/adopt img from html:\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>
Rob W 的解答在谷歌浏览器中(至少29版及以下)无法使用,因为 DOMParser 不支持“text/html”类型,而 XMLSerializer 在谷歌浏览器中为 HTML 文档生成 HTML 语法(不是 XHTML)。
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" />
注意:在IE9中,parseFromString(htmlString, 'text/html');
会抛出错误,因为text/html MIME类型不被IE9支持。但是在IE10和IE11中可以使用。
这将会做得相当不错:
result = text.replace(/(<img\b[^<>]*[^<>\/])>/ig, "$1 />");
result = text.replace(/(<img\b(?:[^<>"'\/]+|'[^']*'|"[^"]*")*)>/ig, "$1 />");
<img alt="2 > 1" src="2gt1">
处已经失败了。输出结果为 <img alt="2 /> 1" src="2gt1">
。 - Rob W