Question

我需要编写一个脚本来读取一个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文档只包含一个图像，则可以正常工作。如果声明了两个图像，程序将在第一个图像上循环并忽略第二个图像。

有没有办法告诉替换函数从字符串中的某一点开始？有没有更好的方法来执行此操作？

Answer 1

如您对问题的评论中所述，有更好的方法可以实现这一目标。

关于您的代码：

代码中的for循环存在问题 - v++执行两次 - 一次在for循环增量条件下，一次在body中。
另一个问题是.replace()方法的使用方式。如果正则表达式中没有\g标志，replace()方法将只查找并替换第一个匹配项。有关详情，请查看documentation和this 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

Answer 2

纯JS解决方案：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 3

看起来你可以用一个全局替换来做到这一点：

例如，如果您的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标签的字符串，这似乎对我有用。如果我错过了额外的复杂性/要求，我会道歉。

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

3 个答案: