英文と和訳を見やすく改行してくれるサイトを作ってみた|2001Y.me

課題などで和訳と英文を見る際に、2枚を並べてみるとどこだったか分からなくなるし、1枚にまとめるのもめんどくさい。そこで、英語の文章とそれを訳した日本語をコピペするだけで、英文と和文を交互に改行してくれるようにしてみました。

英語と日本語訳を交互に改行して並び替えるツール

英語

日本語

結果

主な仕様

1. 文は ピリオド(.) と 句点(。) で識別

交互に並べ替える上で、 . で区切って文を識別させた。

2. 文の数は同じでないと機能しない

1つの英文に対して、1つの和訳があることを想定しているため、文の数が同じでないと機能しない。ただ、仕組み上、英文の方が1文多くても表示はされる。

3. 段落は英文の 改行 で識別

段落を識別するために英文の改行を用いた。1回の改行で段落切り替えと認識するため、1文づつ1回改行しているような文章にはあまり向かない。

4. 日本語の改行は無視

Google翻訳などの翻訳ツールで翻訳結果に改行が引き継がれないことを考慮して、日本語の改行は無視するようにした。

5. 文の前後の無駄な余白は消去

文の前後にスペースがある場合は消去される。これがないと英文はピリオド後に半角スペースがあることが多いため、英文の頭がガタガタになる。

コード

let enList = enInput.value.split("."),  //英文をピリオドで区切って配列化
    jpList = jpInput.value.split("。"),  //和文を句点で区切って配列化
    output,en;

for (let i = 0; i < jpList.length; i++) {
    en = enList[i];
    if (en.includes("\n")) {
        en = "\n" + en.trim();  //英文が改行がある場合、文の前後のスペースを消去して、文の前に改行を追加
    } else {
        en = en.trim();  //英文に改行がない場合、文の前後のスペースのみを消去
    }
    output = output + en + ".\n" + jpList[i].trim() + "。\n";  //ピリオドと句点は配列化で消えたので復活させて、英文の下に和約を挿入
}

outputInput.value = output.slice(0, -4); //余分にピリオドと句点が追加されるので整形して出力

//.trimのポリフィル なぜかSafariだとエラーが出たので追加。
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}

placeholder内で改行できないの辛い。あと、.trim()便利。これに翻訳まで内臓しちゃおうかな…。

lightbox