Question

我想用JavaScript为日语文本创建HTML ruby标签。

我有一个带有日语文本的字段（日文汉字和假名，参数“ jap”），我有一个带有日语文本的字段，仅包含假名（参数“ kana”）。我没有为此目的找到任何JavaScript，因此我自己写了一个。这是一个丑陋的代码怪兽，我想知道是否有更简单的方法可以做到这一点。

function isKanji(ch) {
    return (ch >="\u4e00"&& ch <="\u9faf") || (ch >="\u3400"&& ch <="\u4dbf");
}

function showRuby(jap, kana) {
    var id_ruby=document.getElementById("jap_ruby");
    var id_jap=document.getElementById("japaneseid");
    jap+=" ";
    kana+=" ";
    var res="";
    var kanji="";
    var furi="";
    var i;
    var iK=-1;
    for (i=0;
    i < jap.length;

    i++) {
        iK+=1;
        var charJ=jap.charAt(i);
        var charK=kana.charAt(iK);

        if (isKanji(charJ)) {
            //kanji, set result
            res+=((isKanji(jap.charAt(i - 1)) !=true)) ? "<ruby>"+charJ: charJ;
            furi+=charK;
        }

        else {

            //no kanji, if character before was kanji, get furigana, else set result with kana
            if (isKanji(jap.charAt(i - 1))) {
                //here the furigana for the kanji before, continue loop for kana until they match
                for (iK;
                iK < kana.length;

                iK++) {
                    charK=kana.charAt(iK);
                    charKnext=kana.charAt(iK + 1);
                    charJnext=jap.charAt(i + 1);

                    if (charK==charJ) {

                        //check if kana belongs to furigana or if it matches the kana in jap
                        if (isKanji(charJnext) || (charKnext==charJnext)) {
                            //kanji furi match
                            res+="<rt>"+furi+"</rt></ruby>"+charK;
                            furi="";
                            break;
                        }
                    }

                    furi+=charK;
                }
            }

            else {
                //set result with kana
                res+=charJ;
            }
        }
    }

    id_ruby.innerHTML=res.trim();
}

比方说，jap =“歯医者さん行かなきゃ”，而假名=“はいしゃさんいかなきゃ”，则输出应该是在红宝石标签中的歯医者さん行かなきゃ，并且每个汉字组顶部都具有匹配的假名。

Answer 1

我真的很喜欢Google出色的diff-match-patch库。我们得到两个字符串之间的差异；在相等的地方，不需要折纸。如果它们不同，我们将在下一个相等的段出现时将它们合并在UserDefaults.standard.set(["Base"], forKey: "AppleLanguages") UserDefaults.standard.synchronize()标记中。我推了一个额外的“相等”部分，以强制显示所有存储的折纸。

<ruby>

const japanese = "歯医者さん行かなきゃ";
const hiragana = "はいしゃさんいかなきゃ";

function furigana(japanese, hiragana) {
  const diffs = new diff_match_patch().diff_main(japanese, hiragana);
  let html = '', ruby = { furigana: null, text: null };
  diffs.push([0, '']);
  diffs.map(([kind, text]) => {
    if (kind == 0) {
      if (ruby.furigana || ruby.text) {
        html += `<ruby>${ruby.text}<rp>(</rp><rt>${ruby.furigana}</rt><rp>)</rp></ruby>`;
        ruby.furigana = null;
        ruby.text = null;
      }
      html += text;
    } else {
      ruby[kind == 1 ? 'furigana' : 'text'] = text;
    }
  });
  return html;
}

document.getElementById('first').innerHTML = furigana(
  "歯医者さん行かなきゃ",
  "はいしゃさんいかなきゃ");

document.getElementById('second').innerHTML = furigana(
  "天使さんがOLとして働いています。", // works even for romaji...
  "エンジェルさんがオーエルとしてはたらいています。");

Answer 2

如果您只是在寻找一种简单的方法来将furigana轻松地放置在汉字上方而不使用所有ruby标签，那么我已经开发出一种方法似乎很容易工作，并且似乎可以在我测试过的所有浏览器中工作仅CSS和HTML。它制作了一个自定义HTML标记，并且确实非常简单好用。

var sortOrder = roles
    .Where(r => r.BranchId == BranchId)
    .Max(r => r.SortOrder) + 1;

JS：从日语/假名输入创建红宝石标签

2 个答案: