javascript - 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 = ["まいあさ"、"とき"、"じ"]

而短语是あの时毥朝６时ニおきテいた结果变成:

あの<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?