プレーンテキストをHTML形式へ変換するツールをつくってみます。

今回は、Webページでテキストをコピペできるとうれしいため、手軽にリアクティブだかなんだかができるVue.jsを使うことにしましょう。
環境準備もめんどくさいので、CDNのVue.jsを使う方法にします。

入出力欄

<div class="cols3">
    <div>
        Input Form
    </div>
    <div>
        Monitor
    </div>
    <div>
        Output Form
    </div>
    <div id="inputForm">
        <textarea v-model="inputText"></textarea>
    </div>
    <div id="monitor" v-html="convertedText"></div>
    <div>
        <textarea v-model="convertedText"></textarea>
    </div>
</div>

このように3カラムの入出力欄を設け、それぞれの欄に変数をバインディングします。

inputText: プレーンテキスト（入力値）
convertedText: HTML形式テキスト（出力値）

一列目はプレーンテキストを貼り付ける場所、三列目は変換したHTMLテキストを表示する場所です。
コピペできるよう、textareaにしておきます。

二列目は変換後のHTMLテキストをサンプル表示する場所です。

二列目は今のところ必要ありませんが、今後ツールに機能を付加した場合に備え、準備しておきます。

JSのほうは以下のような記載です。

<script>
    const { createApp, ref, watch } = Vue

    createApp({
        setup() {
            const inputText = ref("")
            const convertedText = ref("")

            return {
                inputText,
                convertedText,
            }
        }
    }).mount('#app')

</script>

変換方法

ふたつの文章をわける際には、pタグで段落をわける方法とbrタグで改行する方法がありますので、それらを選択して、変換できるようにします。（普段はpタグで段落をわけるため、brタグは滅多に使いませんが）

<div>
    <label><input type="radio" v-model="settingPerLine" value="first" checked />pタグ付加</label>
    <label><input type="radio" v-model="settingPerLine" value="second" />brタグ付加</label>
</div>

Vue.jsのドキュメントを参考にして、radioタイプのinputを二つ設けます。
両方に同じ変数setttingPerLineをバインディングし、valueをそれぞれ設定します。

これにより、チェックが入った側の値がsettingPerLineに格納され、選択されたタイプが確認できます。

変換タイプの選択ができるようになったので、次に変換機能本体をつくります。

変換機能

変換機能は、関数化します。

function formatText(inputText) {
    const splitedText = inputText.split("\n");
    let tmp1 = "";
    if (settingPerLine.value.includes("first")) {
        tmp1 = splitedText.map(el => "<p>" + el + "</p>\n")
    }
    else {
        tmp1 = splitedText.map(el => el + "<br>\n")
    }
    return tmp1.join("");
}

入力があり、出力がある、というシンプルなつくりです。

フォーム入力、変更の検知

入力フォームへプレーンテキストをペーストした場合、および、変換タイプを変更した場合、HTML形式テキストが変更されてほしいです。
ボタンを押して変換するのでもいいですが、さして重い処理を行うわけではないので、リアルタイムで反映されるようにしましょう。

この要件はつまり、変数inputTextとsettingPerLineが変更されたとき、変換処理を行う、ということを意味します。

そこで、Vue.jsのウォッチャーを使い、以下のようにします。

watch(inputText, async (newInput, oldInput) => {
    convertedText.value = formatText(inputText.value);
})
watch(settingPerLine, async (newSetting, oldSetting) => {
    convertedText.value = formatText(inputText.value);
})

以上をくっつけて

以上のコードをくっつけて、できあがったツールがこちらです。

終わりに

使えるか使えないかよくわからんツールができあがりました。

これだけだと大して使い道のないツールになってしまいますので、おいおい機能をプラスしてみましょう。

今思いつくのは、

出力値をクリップボードへコピーする機能
複数改行を刈り取ったり、付加したりする機能
カーソル位置に水平線を入れる機能
CSS設定をプレビューしながら、整形できる機能
pixiv形式とかのルビをHTML形式へ変換する機能

こんな機能を、実現方法が思いついたらプラスしていきたいと思います。