変換作業の効率アップに。
こんにちは、「ふ」です。
みなさんはご自分の作業において、しょっちゅう使用する「テキストの変換パターン」はありませんか？
たとえば「ふ」は、サイトにHTMLコードを掲載することがしばしばあります。
<body> <p>....</p> </body>
ただし、このままHTMLドキュメントに貼り付けると「<」「>」は何らかのタグとみなされ、うまく表示できません。
<body> <p>....</p> </body>
この⬆︎ように「<」を「<」、「>」を「>」変換してHTMLファイルに記述してやる必要があります。ちなみにこれは文字実態参照といいます。
多くのテキストエディタには置換機能が用意されています。それらを利用するのもいいのですが、そのつど「<」→「<」、「>」→「>」というように、置換前と置換後の内容を入力するのも手間が掛かる。
ではもし、よく使う変換パターンに対して、この⬆︎ようなツールを自分で作っておけば、とても便利になるのではないでしょうか。
・ <textarea>要素を２つ配置しておき、１つめに元のテキストを貼り付け。
・ 変換ボタンで、仕込んでおいた変換法則に倣ってテキストを変換、２つめの<textarea>に表示。
・ コピーボタンで、変換したテキストをクリップボードにコピー。
〜２回のボタンクリックだけで変換後のテキストが取得できます。
今回はそういった、自分だけのテキスト変換ツールをJavaScriptで自作する方法について紹介していきます。
実際「ふ」も先ほどの「< >」を変換するツール⬇︎を作って、おおいに活用しています。作業効率が大幅に向上しました。
HTMLタグ変換ツール。
〽️ クリック１つで変換＆コピー。
textareaとbuttonを準備。
それでは作成していきましょう。
はじめに<textarea>と<button>を配置します。
<textarea id = "before_text"></textarea>
<button 「「１onclick = "text_replace()"」」>
replace
</button><br>
<textarea id = "after_text"></textarea>
<button 「「１onclick = "text_copy()"」」>
copy
</button>
テキストエリアを２つ、用意します。
変換前のテキストを貼り付ける#before_text、変換後のテキストを表示させる#after_textを作りました。
またテキストを変換するボタン、変換後のテキストをクリップボードにコピーするボタンを配置。それぞれのボタンにはこのあと実装していく関数が実行されるように、onclick属性で関数名を指定しておきます。
現在の状態⬆︎です。textareaの幅や高さはテキトーに指定しました。
このあとJavaScriptを使い、機能を実装していきましょう。
replaceを実装。
それではJavaScriptを書いていきます。例として「りんご」という文字列を「あおりんご」に変換する、というものを作ってみましょう。
これにより、「りんごみかんりんご」➡︎「あおりんごみかんあおりんご」と変換されるようになります。
「「３//２つのtextareaを取得」」
const before_text = document.getElementById("before_text");
const after_text = document.getElementById("after_text");
はじめに、２つのテキストエリアを取得しておきます。
「「３//テキスト変換関数」」
function text_replace() {
「「３//入力されたテキストを取得（letで宣言しよう）。」」「「１ ..@1@」」
let text_value = before_text.value;
「「３//テキストを変換」」「「１ ..@2@」」
text_value = text_value.replace(/りんご/g,"あおりんご");
「「３//変換後のテキストエリアに表示」」「「１ ..@3@」」
after_text.value = text_value;
}
テキスト変換用の関数です。
@1@ １つめのテキストエリアのvalueプロパティにアクセスして、入力された文字列を取得します。
このtext_valueは変換させるので、letで変数として宣言しておきましょう。
@2@ replaceメソッドを使い、文字列を変換します。
変換前の「りんご」を「/りんご/g」としているのは、正規表現を使っています。
変換前の表記をただの「りんご」とした場合、テキスト中にある１つ目の「りんご」という文字列に対してしか、処理を実行してくれません。
「/りんご/g」とすることで、テキスト内にあるすべての「りんご」という文字列を見つけて、処理をしてくれます。
@3@ ２つめのテキストエリアの内容に変換したtext_valueを指定し、表示させます。
次に、変換後のテキストをクリップボードにコピーする処理を実装していきます。
「「３//コピー用の関数」」
function text_copy() {
「「３//クリップボードにコピー」」
navigator.clipboard.writeText(after_text.value);
}
コピー処理の関数は１行でOKです。
navigator.clipboard.writeText( )メソッドを使い、コピーを行います。引数には変換後のテキストが表示されている２つめのクリップボードの内容を指定します。
after_text.select();
document.execCommand("copy");
テキストのコピー、以前は⬆︎のように「textareaの内容を選択→コピー」という２段階の手順を踏んでいました。ただdocument.execCommand( )は現在非推奨となっているようで、それに変わるのがnavigator.clipboard.writeText( )メソッドです。
新しい記述に慣れていきましょう。なにより１行で処理できるので便利ですしね。
扨（さて）、これで完成です。上のtextareaに「りんご」を含む文字列を入力してみてください（複数でもOK）。
replaceボタンをクリックすると、下のtextareaに変換されたテキストが表示されます。
copyボタンで、クリップボードに内容がコピーされます。どこか別の場所にペーストすることで、コピーできていることが確認できます。
複数の置換をおこなう。
複数の変換を行いたい場合は、replace処理を続けて記述するだけです。
たとえば「りんご→あおりんご」に加えて「みかん→夏みかん」と変換したいとき。
「「３//テキストを変換」」
text_value = text_value.replace(/りんご/g,"あおりんご");
text_value = text_value.replace(/みかん/g,"夏みかん");
「「３//変換後のテキストエリアに表示」」
after_text.value = text_value;
ただし２行目の処理は、１行目の変換後のテキストに対して行われるので、処理の記述順には注意を払う必要があります。
正規表現はチャッピーで。
今回はテキスト変換ツールの作り方について紹介してきました。
が、ここで次のように思う方もいるかもしれません。
「Jsでの実装は解ったが、変換に使う正規表現がそもそもわからない！」
〜実は「ふ」も正規表現については、かじった程度の知識しかありません。でも世の中には便利なものがありますよね。そう、チャッピー（ChatGPT）に教えてもらっちゃいましょう。
⬆︎は「090○○○○○○○○」というハイフン「ー」なしの携帯番号を、ハイフン付きの「090ー○○○○ー○○○○」に変換するパターンについてチャッピーに質問しているところです。
答えてくれた内容を、変換関数に取り入れるだけでOK。楽ちんです。
最後までお読みくださり、ありがとうございました。
このようにJavaScriptにはブラウザという、とっても便利な実行環境が用意されています。みなさんもテキスト変換にかぎらず、自分だけの「便利ツール」を作成して、作業効率化に活用してください。
ではまた〜 🎵
「ふ」です。
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。