Question

我想从数据库返回的字符串中删除<img>标记及其内容。

示例字符串

//I want to retrive dummy texts from my string.
var string = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts";

我试过了

if (string.indexOf('<img') != -1) {
    var newString = $(string).filter(function() {
        return this.tagName != 'img';
    }).text();
}

但是，我的数据库有糟糕的数据，有时返回

//There is no closure for image tag. 
var string = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts";

我的代码将删除整个字符串。

图片标记的位置各不相同。

如何有效地剥离<img>代码？

Answer 1

var str  = "<img src='test.jpg'>dummy texts <img src='text.jpg'>",
    text = $('<div />').append(str).remove('img').text();

FIDDLE

Answer 2

嗯，正确答案是你don't parse HTML with regex。您需要使用适当的XML解析器。幸运的是，您的浏览器是一个！您可以尝试使用jQuery的文档片段：

function stripImages(markup) {
  var fragment = $("<body></body>").html(markup);
  fragment.find("img").remove();
  return fragment.html();
}

var s = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts"
stripImages(s);

这将创建一个文档片段，让您剥离图像标记，然后恢复已清理的HTML。

Answer 3

对我来说有用的是将字符串包装在DOM元素中，您可以像以下一样创建它：

var el = $('<div>');
el.html("<img src='test.jpg'>dummy texts <img src='text.jpg'> dummby text dummy texts");
el.find('img').remove();
console.log(el.html());

然后只需搜索并删除特定元素（图像或其他）

Answer 4

也可以不先添加。

var str = "<img src='test.jpg'/>dummy texts <img src='text.jpg'/> dummby text dummy texts";
str = str.replace(/<img[^>]+>/g, '');

用字符串条纹文本

4 个答案: