node.js - 如何使用javascript正则表达式和nodejs writeFile修改里面的HTML标签？

Question

我正在使用 Node.js 修改一个包含很多内容的 html 文件:

 <img src="img/scene1.jpg">

我想如何将此部分替换为:

<img src="img/scene1.jpg" class="img-responsive" id="scene_141">

id 属性应为 1 到 141，例如:id="scene_1, id="scene_2"...

我写了一个程序如下:

var fs = require('fs')

fs.readFile("my_story.html", 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  var source = data.toString();
  var regexp = /<img src="img/g;
  var nodeCount = (source.match(regexp) || []).length;
  var count = 0;

  while (count < nodeCount) {
        var result = data.replace(regexp, '<img src="img/scene1.jpg" class="img-responsive" id="scene_' + count +'>');
        fs.writeFile("my_story.html", result, 'utf8', function (err) {
            if (err) return console.log(err);
        });
        count++;
  }

});

但是，它给了我这个结果:

<img src="img/scene1.jpg" class="img-responsive" id="scene_141>/scene1.jpg">

以及所有 id="scene_141"。谁知道怎么修它？非常感谢您!

Answer 1

首先，与许多类似的问题一样，真正的答案是:“不要手动执行此操作，有可以使用的解析库。”。例如，有一个名为 cheerio 的 npm 模块，它可以对 HTML 结构进行 jQuery 风格的操作。我不知道它有多好，这是我听说过的唯一一个，所以如果您熟悉 jQuery，它值得尝试，但毫无疑问还有其他。但是，如果您仍然想按自己的方式进行...

k0hamed 的答案对我来说看起来是正确的，但它没有解释你的代码有什么问题，所以我会写另一个答案。

问题出在正则表达式上的 /g 标志。这是正则表达式第一次出现时所需要的。但是，第二次，它会导致 .replace 方法替换与正则表达式匹配的所有子字符串。但它仍然会循环 nodeCount 次。每次，它都会覆盖上一次迭代中保存的文件副本。循环的最后一次迭代很可能会胜出，因此 id 为 scene_141。 (但是，根据文件系统、文件大小和运气，有时可能会显示稍低的场景编号，甚至是损坏的文件。但我不知道这是否可能。)

k0hamed 选择通过停用替换中的 /g 标志来解决此问题。但您也可以使用 /g，如下所示:

var regexp = /<img src="img\/scene1\.jpg">/g;
var count = 0;
var result = data.replace(regexp, function() {
    var currentCount = count;
    count++;
    return '<img src="img/scene1.jpg" class="img-responsive" id="scene_' + currentCount +'>';
});

每次调用该函数时，它都会返回一个字符串，该字符串将替换与正则表达式匹配的子字符串。它返回一个 HTML 字符串，其中 id 每次增加 1。

k0hamed 还明智地将 fs.writeFile 移出了循环，因此它不会继续覆盖文件。