大文字を小文字に変換

2024年7月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「アルファベットを入力すると全部小文字に変換してくれる機能」を作ってみました。

いったい何に使うのかというと、
薬の一覧で、それぞれの薬に個別のIDを振りたい
→そうだ商品名の英語にしよう
→全部大文字だったり、先頭だけ大文字だったり、バラバラなのを統一したい
→全部大文字だった場合、小文字に打ち直すのダルい
→じゃあ変換ツールを作っちゃえばいいじゃない
という感じです。

ボタンで変換

入力欄、変換ボタン、出力欄を用意します。

<input type="text" id="textInput" placeholder="テキストを入力してください">

<button onclick="convertToLowerCase()">変　換</button>

<output id="output">小文字に変換</output>

スクリプトを記述します。

function convertToLowerCase() {
  var inputValue = document.getElementById("textInput").value;
  var lowercaseValue = inputValue.toLowerCase();
  document.getElementById("output").innerHTML = lowercaseValue;
}

toLowerCaseを使うと小文字に変換してくれるようです。

リアルタイム変換

変換ボタンなしで、入力したら即変換してくれるようにしてみます。

<input type="text" id="textInput" placeholder="テキストを入力してください">

<output id="output">小文字に変換</output>

function convertToLowerCase() {
  var inputValue = document.getElementById("textInput").value;
  var lowercaseValue = inputValue.toLowerCase();
  document.getElementById("output").innerHTML = lowercaseValue;
}

document.getElementById("textInput").addEventListener("input", convertToLowerCase);

まだこのaddEventListenerの使い方がよくわかっていません。

ついでにコピーボタン実装

以前の記事でやったコピーボタンを追加してみます。

ただし最近はexecCommand("copy")は非推奨らしいので、かわりにnavigator.clipboardを使っています。

<input type="text" id="textInput" placeholder="テキストを入力してください">

<output id="output">小文字に変換</output>

<button onclick="copyToClipboard()">結果をコピー</button>

function convertToLowerCase() {
  var inputValue = document.getElementById("textInput").value;
  var lowercaseValue = inputValue.toLowerCase();
  document.getElementById("output").innerHTML = lowercaseValue;
}

document.getElementById("textInput").addEventListener("input", convertToLowerCase);

function copyToClipboard() {
  var resultText = document.getElementById("output").innerText;
  navigator.clipboard.writeText(resultText);
  alert("『" + resultText + "』をコピーしました!");
}

最後のalertはあってもなくてもいいと思います。

おまけ

toLowerCaseをtoUpperCaseに変えると、全部大文字にしてくれます。