Javascript用正则表达式替换多个图像调用

Javascript replace multiple images calls with regex

本文关键字：图像 调用 替换 正则表达式 Javascript      更新时间：2023-09-26

我需要写一个脚本，读取HTML文件，其中有多个图像声明。问题是对图像的调用很简单，我需要添加几个指令。从这段代码:

<img src="myImage1.jpg" class="image_document">
<img src="myImage2.jpg" class="image_document">

我必须得到这个:

<a onclick="bloquedefilementchapitres();" href="articles/myImage1.jpg" class="fancybox" rel="images"><img src="articles/myImage1.jpg" class="image_document"></a>
<a onclick="bloquedefilementchapitres();" href="articles/myImage2.jpg" class="fancybox" rel="images"><img src="articles/myImage2.jpg" class="image_document"></a>

所以，我尝试使用正则表达式来执行这种想法，即每个图像都可以被正则表达式检测到。然后，每个文件名都可以存储在一个数组中，这样我就可以使用文件名来编写链接。

我是这样做的:

var recherche_images,
urls = [], 
str = theHTMLcode,
rex = /<img[^>]+src="?([^"'s]+)"/g;
while (recherche_images = rex.exec(str)) {
    urls.push(recherche_images[1]); 
}
for (var v = 0; v < urls.length; v++) {
    str = str.replace(/<img src='"/, '<a onclick='"bloquedefilementchapitres();'" href='"articles/' + urls[v] + ''" class='"fancybox'" rel='"images-' + idunite + ''"><img src='"articles/');
}
str = str.replace(/image_document'">/g, 'image_document'"></a>');

如果HTML文档只包含一个图像，它可以工作。如果声明了两个图像，程序在第一个图像上循环，忽略第二个图像。

是否有办法告诉替换函数在字符串中的某个点开始?有更好的方法来做这件事吗?

有更好的方法来实现这一点，正如你的问题的评论中所指出的那样。

关于你的代码:

  • 你的代码中的for循环有一个问题- v++执行两次-一次在for循环增量条件下，一次在主体中。

  • 另一个问题是.replace()方法的使用方式。在正则表达式中没有'g标志，replace()方法将只查找并替换第一个出现。查看文档和这个SO问题了解更多细节。

    • 检查下面的代码，它使用正则表达式中的/g运算符来查找字符串中的所有img匹配，每个匹配被传递给返回替换字符串的函数。

你需要的是这样的东西:

var recherche_images,
urls = [], 
str = '<img src="myImage1.jpg" class="image_document"><img src="myImage2.jpg" class="image_document">',
rex = /<img[^>]+src="?([^"'s]+)"/g;
while (recherche_images = rex.exec(str)) {
    urls.push(recherche_images[1]); 
    console.log(recherche_images[1]);
}
var idunite = 'test"';
var v = -1;
str = str.replace(/<img src='"/g, function(mtch) {
    v++;
    return '<a onclick='"bloquedefilementchapitres();'" href='"articles/' + urls[v] + ''" class='"fancybox'" rel='"images-' + idunite + ''"><img src='"articles/';
});

str = str.replace(/image_document'">/g, 'image_document'"></a>');
console.log(str);

JSFiddle .

纯JS解决方案:

var x = document.getElementsByClassName('image_document');
for (var i = 0; i < x.length; i++) {
  var obj = x[i];
  var n = document.createElement('a');
  n.href = "articles/" + obj.attributes.src.value;
  obj.src = "articles/" + obj.attributes.src.value;
  n.className = "fancybox";
  n.rel = "images";
  n.innerHTML = obj.outerHTML;
  n.addEventListener('click', bloquedefilementchapitres);
  console.log(n);
  obj.parentNode.replaceChild(n, obj);
}
<img src="myImage1.jpg" class="image_document">
<img src="myImage2.jpg" class="image_document">

似乎你可以用一个全局替换来做到这一点:

例如，如果你的HTML字符串在一个名为s的变量中，那么它将是:

s.replace(/<img src="([^'"]+)" class="image_document">/g, 
          "<a onclick='"bloquedefilementchapitres();'" href='"articles/$1'" class='"fancybox'" rel='"images'"><img src='"articles/$1'" class='"image_document'"></a>");

对于具有一个或多个img标签的字符串，这似乎在控制台中对我有效。抱歉，如果我错过了额外的复杂性/需求。

相关文章：