从字符串中删除图像元素

Question

我有一个变量包含HTML图像元素的字符串。

我想要从字符串中删除图像元素。

我尝试过：var content = content.replace(/<img.+>/,"");

和：var content = content.find("img").remove(); 但是没有成功。

有人能帮我解决吗？

谢谢

- MeltingDog

Answer 1

var content = content.replace(/<img[^>]*>/g,"");

[^>]* 的意思是除了 > 之外的任意数量的字符。如果使用 .+ 替代它，那么如果有多个标签，替换操作会一次性删除所有标签，包括它们之间的任何内容。默认情况下，操作是贪婪的，即使用最大可能的有效匹配。

结尾处的/g表示替换所有出现的情况（默认情况下，它只删除第一个出现）。

- Matt Coughlin

---

注意：如果img标签像这样<img src="blah.png" title=">:(" />，这种方法将无法正常工作。更好的方法是：var content = $(content).find("img").remove().html();。 - Derek 朕會功夫

@Derek，它需要一个end()函数：var content = $(content).find("img").remove().end().html();，根据@Scott Evernden的答案。 - Matt Coughlin

Answer 2

$('<p>').html(content).find('img').remove().end().html()

- Scott Evernden

---

$('.selector').find('img').remove(); 同样有效。 - Eryk Wróbel

这应该是被接受的答案。请不要使用正则表达式来解析HTML。 - naveen

Answer 3

以下正则表达式应该可以解决问题：

var content = content.replace(/<img[^>"']*((("[^"]*")|('[^']*'))[^"'>]*)*>/g,"");

它首先匹配<img。然后[^>"']*匹配除>，"和'之外的任何字符任意次数。然后(("[^"]*")|('[^']*'))匹配两个"中间带有任何字符（除了"本身，即这部分[^"]*）或相同的内容，但使用两个'字符。

例如"asf<>!('"或'akl>"<?'。

接下来是除>，"和'之外的任何字符任意次数。当正则表达式在单引号或双引号之外找到>时，结束匹配。

这将解决属性字符串内包含 > 字符的问题，正如 @Derek 朕會功夫 所指出的那样，并因此匹配并删除以下测试情境中的所有四个图像标签：

<img src="blah.png" title=">:(" alt=">:)" /> Some text between <img src="blah.png" title="<img" /> More text between <img /><img src='asdf>' title="sf>">

当然，这是受到@Matt Coughlin答案的启发。

- mlunoe

Answer 4

使用 text() 函数，它会删除所有 HTML 标签！

var content = $("<p>"+content+"</p>").text();

- powtac

---

谢谢 - 但我需要保留所有其他HTML标签 - 只是不包括img标签。 - MeltingDog

Answer 5

我现在使用的是IE浏览器...这个方法很好用，但是我的标签都变成了大写（我想是使用innerHTML后造成的）...所以我添加了“i”来使其不区分大小写。现在Chrome和IE都很开心。

var content = content.replace(/<img[^>]*>/gi,"");

- cakidnyc

Answer 6

这对你有用吗？：

var content = content.replace(/<img[^>]*>/g, '')

- senfo

---

需要添加 //g 才能移除所有的 img 标签。 - Matt Coughlin

Answer 7

你可以使用DOMParser来解析字符串，然后使用纯JS进行任何操作并重新序列化以获取回新的字符串，从而在不使用正则表达式或库（如jQuery）的情况下实现此操作。

- pulsejet

Answer 8

你可以将文本加载为DOM元素，然后使用jQuery查找所有图像并将其删除。我通常尝试将XML（在这种情况下是HTML）视为XML而不是尝试通过字符串解析它们。

var element = $('<p>My paragraph has images like this <img src="foo"/> and this <img src="bar"/></p>');

element.find('img').remove();

newText = element.html();

console.log(newText);

- Jason