JavaScript正则表达式 - 添加闭合的img标签

Question

JavaScript正则表达式 - 添加闭合的img标签

3

我需要添加一个闭合的图片标签。当前的html代码如下：

<img class="logoEmail" src="/images/logoPDF.png">

我想要的：

<img class="logoEmail" src="/images/logoPDF.png"/>

我该如何做到这一点？

- Anthony

你试过记事本吗？ ;) - Shanimal

你可以尝试，但这并不能在所有情况下百分之百地保证成功（比如标签中间有换行符的情况）。 - LatinSuD

我需要在xml中使用它。 - Anthony

3个回答

4

你可以尝试使用这个正则表达式：

result = myInput.replace(/^([^\.]*\.[^>]*)(.*)$/g, "$1/$2");

演示

它捕获了直到一个字面点的所有字符并将其存储到一个组中。然后它再次捕获直到>的字符并存储到另一个组中。在替换部分的捕获组之间添加/将为您提供所需的输出。

- Avinash Raj

为什么不直接使用 document.body.innerHTML = document.body.innerHTML.replace(/(<img[^>]+)/g, "$1 /");？请参考我的答案演示。 - Frank Conijn - Support Ukraine

它对我不起作用，因为在example2的情况下它会放置双斜杠//。 - LatinSuD

@LatinSuD能否为我做上面的评论？ - Avinash Raj

0

这可以很简单，就像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo Replace IMG tags w/ regex</title>
    <script type="text/javascript">
        window.onload = function() {
            document.body.innerHTML = document.body.innerHTML.replace(/(<img[^>]+)/g, "$1 /");
        }
    </script>
</head>
<body>
    <p>Some text.</p>
    <img src="images/logoPhone.jpg">
        <br>
    <img src="images/logoMail.png">
    <p>Some more text.</p>
</body>
</html>

.
解释：

<img：匹配必须以此开头。
[^>]：在起始匹配后，下一个字符可以是任何字符，但不能是 >。
+：一个或多个出现。
g：全局应用，不要在第一次匹配时返回。
$1：就像第一个捕获组（=第一组括号之间的内容）一样。
.

请注意，无论文档类型如何，Firebug都不会显示关闭斜杠。但是您可以在此处查看正则表达式脚本的实际效果：http://regex101.com/r/zS2zO1。

- Frank Conijn - Support Ukraine

对我来说它不起作用，因为在example2的情况下它会放置双//。 - LatinSuD

在您的示例中确实是这样，但原帖并没有提到同时有和没有闭合斜杠的图像标签，只有没有闭合斜杠的情况。 - Frank Conijn - Support Ukraine

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LatinSuD · Accepted Answer

myInput ='<img class="example1" src="/images/example1.png">';
myInput += '<img class="example2" src="/images/example2.png"/>';

result = myInput.replace(/(<img("[^"]*"|[^\/">])*)>/gi, "$1/>");

正则表达式的解释：

<img 开始标签

"[^"]*" 标签内的字符串，可能包含/字符。

[^\/">] 除了字符串、/和结束标签外的任何内容

> IMG标签的结尾

这个正则表达式只匹配未完成的标签，并将其替换为整个标签，加上/>

正如我之前所说，这并不是完全可靠的，可能没有一种正则表达式能够100%地工作。