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>

如何仅使用属性和特定类替换img标记

1 个答案: