JavaScript中的.replace方法和重复的字符

Question

我尝试使用JavaScript在我的文字上插入HTML ruby​​字符。我们的想法是找到汉字并用存储在fgana数组中的红宝石字符替换它。我的代码是这样的：

for (var i = 0; i < kanji.length; i++) { phrase = phrase.replace(kanji[i],"<ruby><rb>" + kanji[i] + "</rb><rt>" + fgana[i] + "</rt></ruby>"); }

当没有要替换的重复字符时，它就可以了，但是当结果与我除外的结果不同时。例如，如果数组是这样的：

kanji = ["毎朝","時","時"] fgana = ["まいあさ"、"とき"、"じ"]

这句话是あの时毎朝6时におきていた结果变成：

あの<ruby><rb><ruby><rb>時</rb><rt>じ</rt></ruby></rb><rt>とき</rt></ruby><ruby><rb>毎朝</rb><rt>まいあさ</rt></ruby> 6 時 におきていた。

取代期望的：

あの<ruby><rb>時</rb><rt>とき</rt></ruby><ruby><rb>毎朝</rb><rt>まいあさ</rt></ruby> 6 <ruby><rb>時</rb></ruby></rb><rt>じ</rt> におきていた。

为了更好地说明，请查看渲染的示例：

看看第一时间是如何接收两个值とき和じ而第二时间没有收到任何值。这个想法是第一个是とき和第二个じ（因为日语根据某些因素对同一个角色有不同的读数）。

可能是我的代码失败了？ 提前致谢

Answer 1

它失败，因为您要查找的字符仍然存在于替换版本中：

...replace(kanji[i],"<ruby><rb>" + kanji[i]...

这个应该有效：

var kanji = ["毎朝", "時", "時"],
    fgana = ["まいあさ", "とき", "じ"],
    phrase = "あの時毎朝 6 時におきていた",
    rx = new RegExp("(" + kanji.join("|") + ")", "g");

console.log(phrase.replace(rx, function (m) {
  var pos = kanji.indexOf(m),
      k = kanji[pos],
      f = fgana[pos];
  delete kanji[pos];
  delete fgana[pos];
  return "<ruby><rb>" + k + "</rb><rt>" + f + "</rt></ruby>"
}));

只需复制并粘贴到控制台即可获得：

あの<ruby><rb>時</rb><rt>とき</rt></ruby><ruby><rb>毎朝</rb><rt>まいあさ</rt></ruby> 6 <ruby><rb>時</rb><rt>じ</rt></ruby>におきていた 

上面的行与您想要的结果略有不同，只是不确定您是否确实想要这样：

 ...6 <ruby><rb>時</rb></ruby></rb><rt>じ</rt>...
                        ^^^^^ here           ^ not here?