Question

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

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

我希望如何将此部分替换为：

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

id属性应为1到141，如：id =＆＃34; scene_1，id =＆＃34; scene_2＆＃34; ...

我写了一个节目：

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 =＆＃34; scene_141＆＃34;。谁知道怎么修它？非常感谢你的进步！

Answer 1

首先，正如许多这样的问题一样，真正的答案是：＆＃34;不要手动执行此操作，您可以使用解析库。＆＃34;。例如，有一个名为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移到了循环之外，因此它不会覆盖文件。

Answer 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/scene1.jpg">`;
  var nodeCount = (source.match(new RegExp(regexp, 'g')) || []).length;
  var count = 0;
  while (count < nodeCount) {
        data = data.replace(new RegExp(regexp), '<img src="img/scene1.jpg" class="img-responsive" id="scene_' + count +'>');
        count++;
  }
  fs.writeFile("my_story.html", data, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

要计算它们你需要全局标志然后替换它们你需要只替换第一个匹配。在完成对文件的编辑后，您应该只将新数据写入文件一次。

Answer 3

修改完整的img标记。您只需稍微修改正则表达式

var regexp = /<img src=\"img\/scene1.jpg\">/g;

另外，请检查result

中的双引号是否已关闭

如何使用javascript正则表达式和nodejs writeFile修改HTML标签？

3 个答案: