【javascript】テキストを大文字/小文字に変換させる方法

今回はjavascriptを使って画面に表示されているテキストを大文字や小文字に変換させて表示させる方法を紹介していきます。

テキストを大文字/小文字に変換させる方法

大文字を小文字に変換させる（toLowerCase）

toLowerCaseは対象のテキストに大文字のアルファベットが含まれている場合、小文字に変換した文字を返してくれます。

小文字を大文字に変換させる（toUpperCase）

toUpperCaseはtoLowerCaseと逆で対象のテキストに小文字のアルファベットが含まれていた場合に大文字に変換した文字を返してくれます。

それでは下記に「toLowerCase」と「toUpperCase」の書き方を紹介します。

html

<h2>大文字から小文字に変換</h2>
<div id="test1">KOMOZI</div>

<h2>小文字から大文字に変換</h2>
<div id="test2">oomozi</div>

javascript

/* 大文字を小文字に変換 */
let text1 = document.getElementById('test1').textContent;
let text_change1 = text1.toLowerCase();
document.getElementById('test1').textContent = text_change1;

/* 小文字を大文字に変換 */
let text2 = document.getElementById('test2').textContent;
let text_change2 = text1.toUpperCase();
document.getElementById('test2').textContent = text_change2;

サンプル