javascript - 如何仅用属性和特定类替换 img 标签

Question

我是 javascript 的新手，正在寻找一些可以用其属性替换图像标签的正则表达式或方法。

图像标签可以是多个而没有任何唯一 ID，我只想替换那些具有特定类的图像标签。

例如我有这样的字符串:

var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass"  dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass"  dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';

所以它的输出应该是这样的:

hi :::att2::: :::newatt2::: some more tag :::moreatt2::: <img data-attr1="noreplace" src="abc" class="img" /> end

到目前为止我尝试的是:

var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass"  dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass"  dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';

var rgx = /<img[^>]*class="specificclass"[^>]*>/;

var regex = /<img.*?dataattr2='(.*?)'/;
var src = regex.exec(str)[1]
str = str.replace(rgx,src);

console.log(str);

但是它给出了一个错误，我不知道它是否是正确的方法

Answer 1

我不会为此使用正则表达式，它对于像 HTML 这样的非常规文本来说是出了名的脆弱和有问题。

相反，我会使用浏览器内置的 DOM 解析器(您已经标记了 jQuery，所以我假设您是在浏览器上或在具有 DOM 的其他环境中执行此操作):

var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass"  dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass"  dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';

// Parse it and wrap it in a div
var frag = $("<div>").append($.parseHTML(str));
// Find the relevant images
frag.find("img.specificclass[dataattr2]").each(function() {
  // Replace the image with a text node containing :::[dataattr2]:::
  var $this = $(this);
  $this.replaceWith(document.createTextNode(":::" + $this.attr("dataattr2") + ":::"));
});
// Get the HTML of the result
var str = frag.html();

console.log(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>