ホームよく読まれている記事一覧

中の人

【JavaScript】改行を取り除いたテキストにしたい

公開: 2022-03-30 04:33
更新: 2023-08-01 18:58

703

javascript 正規表現 hrml

改行が入っているテキストの改行を取り除きたくてプログラムを作りました。

【広告】

日本最大級のまなびのマーケット

楽天グルメ大賞受賞のおせち等、自然派「食」のお取り寄せ【ちこり村本店サイト】

指示するだけでトランクルームから荷物を配送できる宅トラ

こんにちは！

最近UdemyでAWSを勉強しています。中の人です。

タイトル通り、改行が入ったテキストを上手い具合に整形するプログラムを作ったので紹介します！

なぜ作ったか

改行、さらに不要な空白行が入った英語を翻訳したかったからです！

(Udemyのトランサプションという機能をご存じの方なら気持ちがわかるかも)

どういうこと？

The Gist: Since we’re essentially dealing// ←不要な改行
// 不要な空白行
with a game show wrapped inside a reality
// 以下同じ
TV competition, that’s itself wrapped inside

a thrilling drama, we’re gonna need a few

minutes ofexposition, right? Right?

こんなテキストを

The Gist: Since we’re essentially dealing with a game show wrapped inside a reality TV competition, that’s itself wrapped inside a thrilling drama, we’re gonna need a few minutes of exposition, right? Right?

こうしたいということです。

ちなみに、ここでいう改行は、単語の途中にはない場合を想定しています。

ソースコード

(2022/04/04追記

マウスでの貼り付け時の処理がなかったので追加、修正しました。

)

📁 new_line_replace.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />

<body>
    <h1>不要な改行取り除くよアプリ</h1>
    <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
    <div style="display: flex;">
        <button type="button" id="textarea_clear_button">クリア</button>
        <button type="button" id="output_area_copy_button">コピー</button>
        <div id="copyed_text" style="display: none;">Copyed!</div>
    </div>
    
    <div id="output_area">
        <!-- insert_js -->
    </div>
    
    <script>
        const textarea = document.getElementById('textarea');
        const textarea_clear_button = document.getElementById('textarea_clear_button');
        const output_area = document.getElementById('output_area');
        const output_area_copy_button = document.getElementById('output_area_copy_button');
        const copyed_text = document.getElementById('copyed_text');
        const event_actions = ['keyup', 'paste'];
        for (let i = 0;event_actions.length > i;++i) {
            textarea.addEventListener(event_actions[i], function (e) {
                let result = null;
                let str = '';
                if (e.type.toLowerCase() === 'paste') {
                    str = e.clipboardData.getData('text/plain');
                } else {
                    str = e.target.value;
                }
                let regex = /[^\n]+\n?/g;
                let matches = str.match(regex);
                if (matches !== null && matches.length) {
                    let array = [];
                    for (let i = 0;matches.length > i;++i) {
                        array.push(matches[i].replace(/\n$/, ''));
                    }
                    result = array.join(' ');
                    output_area.innerHTML = result;
                } else {
                    output_area.innerText = '';
                }
            });
        }
        
        textarea_clear_button.addEventListener('click', function () {
            textarea.value = '';
            textarea.focus();
            output_area.innerText = '';
            copyed_text.style.display = 'none';
        });

        output_area_copy_button.addEventListener('click', function () {
            copyToClipboard(output_area.innerText);
            copyed_text.style.display = 'block';
        });

        // 以下はhttps://maku.blog/p/buk5i2o/で紹介されていたコードをコピペさせていただきました。
        function copyToClipboard(text){
            // テキストコピー用の一時要素を作成
            const pre = document.createElement('pre');

            // テキストを選択可能にしてテキストセット
            pre.style.webkitUserSelect = 'auto';
            pre.style.userSelect = 'auto';
            pre.textContent = text;

            // 要素を追加、選択してクリップボードにコピー
            document.body.appendChild(pre);
            document.getSelection().selectAllChildren(pre);
            const result = document.execCommand('copy');

            // 要素を削除
            document.body.removeChild(pre);

            return result;
        }
    </script>
</body>
</html>

実際の挙動

まず、普通に翻訳してみます。

(ちなみにコピペさせてもらった記事は、英語版のyahooニュースの記事で芸人の千鳥を紹介？している記事になります。https://decider.com/2022/03/22/last-one-standing-netflix-review/)

違う翻訳になってしまいます。

以下が上記コードでテキストを整理した場合です。

ちゃんと改行が取り除かれて、原文と同じ翻訳がされてますね！

やったぜ

コードの説明

詳しく確認したい方は、ご自身でコードをコピペして動かしてもらえばよくわかるかと思いますが、

            let regex = /[^\n]+\n?/g;
            let matches = str.match(regex);
            if (matches !== null && matches.length) {
                let array = [];
                for (let i = 0;matches.length > i;++i) {
                    array.push(matches[i].replace(/\n$/, ''));
                }
                result = array.join(' ');
                output_area.innerHTML = result;
            } else {
                output_area.innerText = '';
            }

ここの

let regex = /[^\n]+\n?/g;

これで、

・改行が含まれない一文字以上のテキストで

・改行で終わる、または改行がないテキスト

をマッチさせています。

つまり

// ↓改行がなくて、終わりが改行
The Gist: Since we’re essentially dealing
// 空白行については、頭に改行が一つだけなので、改行が含まれない一文字以上のテキストにマッチしない
// ↓改行がなくて、終わりが改行
with a game show wrapped inside a reality

// ↓改行がなくて、終わりが改行
TV competition, that’s itself wrapped inside

// ↓改行がなくて、終わりが改行
a thrilling drama, we’re gonna need a few

// ↓改行がなくて、終わりに改行がない
minutes ofexposition, right? Right?

ということで、上記の例では全テキストにマッチします。

で、あとは適当にマッチしたテキストの終わりの改行タグを半角スペースに置き換えて、全て連結しています。

終わりに

私が今Udemyで受講しているAWSの講座が、全編英語なんですね。で、私は英語わからないので、トランサプションという機能で講師が喋っている内容を表示して、逐次コピーして翻訳、コピーして翻訳という作業をしているのですが、このとき、このトランサプションに表示された英語をコピーすると、折り返されている箇所で改行が入ってしまうのです。

しばらくそのままの状態で翻訳していたのですが、やっぱ普通の形にして翻訳した方がわかりやすかったので、今回おらぁぁて感じで作ってみました。

つまり、このプログラムはUdemyのトランサプションの英語を翻訳するために作ったわけです。あまりにも少ないユースケース！

かなり簡単なプログラムで、夜中にササっと組んだプログラムですが、個人的には改行を手作業で削除する手間がなくなったので満足しています。

ファイルもhtmlファイル一つだけなので、適当にhtmlファイル作ればあとはブラウザで動いてくれるので、わざわざサーバーにアップする必要もないのでお手軽です。

(20230801追記

github pagesに公開しました。

不要な改行取り除くよアプリ

)

誰かの参考になれば幸いです！

ではまた！