Question

我需要在字符串中的所有图像标记的末尾添加斜杠。我正在使用JavaScript正则表达式。以下是我到目前为止的情况：

strInput = strInput.replace(/<img.*">/gm, "");

但我不确定要用什么来替换它？我正在使用文本区域的值并将其解析为XML，但图像标记因为它们是HTML而生成错误。感谢。

Answer 1

您必须使用捕获组：

strInput = strInput.replace(/(<img[^>]+)>/gm, "$1 />");

这是小提琴：http://jsfiddle.net/ChNnU/

Answer 2

您应该让浏览器进行“繁重的工作”；显然，浏览器可以解析HTML-毕竟，浏览器还应如何向我们显示网页？通过将某些dom节点的<type-expression> ’:’ <parameter-name>设置为HTML字符串，或使用.innerHTML，可以使用JavaScript使浏览器为您解析HTML。然后，您已将HTML字符串转换为DOM节点树，即已对其进行了解析。

并且有浏览器内置的方法可以将DOM树转换为XHTML字符串。您可以简单地以编程方式创建XHTML文档，然后使用.insertAdjacentHTML向其添加任何DOM树（可以完全来自HTML（非XHTML）文档），然后使用.appendChild和DOM树的.outerHTML方法（现在将XHTML文档作为所有者文档）将提供XHTML。

如果从DOM节点开始，则可以使用以下2个功能：

.innerHTML

（请注意，该节点将归新创建的XHTML文档所有，因此它将从您的原始文档中消失。如果应保留在原文档中，请在调用上述函数之一之前对其进行克隆。）

如果您以字符串开头，则只需在调用上述代码之前设置新创建节点的innerHTML。为了方便起见，以下是代码段。有3个例子。 html到xhtml为2，xhtml到html为一个。

var nsx = "http://www.w3.org/1999/xhtml";
function outerXHTML(node){
    var xdoc = document.implementation.createDocument(nsx, 'html');
    xdoc.documentElement.appendChild(node);
    return node.outerHTML;
}
function innerXHTML(node){
    var xdoc = document.implementation.createDocument(nsx, 'html');
    xdoc.documentElement.appendChild(node);
    return node.innerHTML;
}

function html2xhtml(html){
    var nsx = "http://www.w3.org/1999/xhtml";
    var body = document.createElement('body');
    body.innerHTML = html;
    var xdoc = document.implementation.createDocument(nsx, 'html');
    xdoc.documentElement.appendChild(body);
    return body.innerHTML;
}
function xhtml2html(xhtml){
    var body = document.createElement('body');
    body.innerHTML = xhtml;
    var doc = document.implementation.createHTMLDocument();
    doc.documentElement.appendChild(body);
    return body.innerHTML;
}
var html1 = '<div>lorem<img>ipsum<img>dolor sit amet<br></div>';
var html2 = '<ul><li><svg><rect width="100" height="100"></rect></svg></li></ul>';
var html3x = '<img />';
var node1  = document.getElementById('node1');
var node1x = document.getElementById('node1x');
var node2  = document.getElementById('node2');
var node2x = document.getElementById('node2x');
var node3  = document.getElementById('node3');
var node3x = document.getElementById('node3x');
node1.textContent = html1;
node2.textContent = html2;
node3x.textContent = html3x;

node1x.textContent = html2xhtml(html1);
node2x.textContent = html2xhtml(html2);
node3.textContent = xhtml2html(html3x);

code older version

you can also do it with XMLSerializer（对于html <pre id='node1'></pre>xhtml <pre id='node1x'></pre><hr> html <pre id='node2'></pre>xhtml <pre id='node2x'></pre><hr><hr> xhtml <pre id='node3x'></pre>html <pre id='node3'></pre>部分不是 fromString部分），记为@Kaiido。

如何使用JavaScript将HTML转换为XHTML？

2 个答案: