hoge

細かな修正点が見つかりますがブックマーク機能の方は一旦置き、新たに記事のリアルタイムプレビューに取り組もうとしています。 現在はまぞうやてぃーだでは記事投稿画面でデザインモードやPCプレビューを用いることで入力エリアの文字列をHTMLとして表示することができます。ただ個人的にデザインモードやPCプレビューボタンを毎回押して確認するのは気になるので、入力したらすぐに確認できるような要素が隣り合っていると便利かなあと思いました。 `textarea`の入力を他の要素に反映するには以下のようにします。 ```javascript const textarea = document.querySelector('textarea'); textarea.addEventListener('input', (e) => { console.log(e.target.value); }); ``` `textarea`に入力または削除が行われるとイベントを検出し、それを表示したい要素にコピーします。 ```javascript const textarea = document.querySelector('textarea'); + const preview_area = document.querySelector('#preview-area'); textarea.addEventListener('input', (e) => { - console.log(e.target.value); + preview_area.innerHTML = e.target.value; }); ``` `<br>`のようなタグを入力するとしっかりと表示領域にも反映されますが、頻繁に使用する改行をタグで入力するのは面倒なので、表示領域では改行コードを改行タグに置換して表示します。 ```javascript const textarea = document.querySelector('textarea'); const preview_area = document.querySelector('#preview-area'); textarea.addEventListener('input', (e) => { - preview_area.innerHTML = e.target.value; + preview_area.innerHTML = e.target.value.replace(/\r?\n/g, '<br>'); }); ``` 改行コードはOSによって異なったりするので、CRLF・CR・LFの全てに対応できるように正規表現で`\r?\n`を指定します。`\r?`はCRがあってもなくても良いという意味なので、なければそのままLFを'<br>'に置換し、あればCRLFを塊として置換します。 以上でリアルタイムプレビューが可能になりますが、1文字の入力/削除のたび全ての文字を置き換えているのでパフォーマンス的には悪く、少し考える必要があります。