CODEWITHSUNDEEP
javascript
YLeven
YLeven

Reputation: 107

.replace method in JavaScript and duplicated characters

I'm trying to use JavaScript to insert HTML ruby characters on my text. The idea is to find the kanji and replace it with the ruby character that is stored on the fgana array. My code goes like this:

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

It does that just fine when there aren't duplicated characters to be replaced, but when there are the result is different from what I except. For example, if the arrays are like this:

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

And the phrase is あの時毎朝６時におきていた the result becomes:

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

Instead of the desired:

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

To illustrate it better, look at the rendered example: Imgur

Look at how the first 時　receives both values とき and じ while the second receives nothing. The idea is to the first be とき and the second じ (as Japanese has different readings for the same character depending on some factors).

Whats might be the failure on my code? Thanks in advance

Upvotes: 1

Views: 210

Answers (1)

CHAN
CHAN

Reputation: 1576

It fails because the char you are looking for still exists in the replaced version:

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

And this one should work:

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

Just copy and paste into console and you get:

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

Above line is a bit different from your desired result thou, just not sure if you indeed want this:

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

Upvotes: 2

Related Questions