Skip to content

[JavaScript]テキストを書き換える

ma-san
ma-san(鈴木正行)

JavaScriptを使って要素に書かれているテキストを意図的に書き換えることができます。

要素を取得する#

JavaScriptでWebページを自由に操作するには要素(HTML)を操作することが第一歩。
DOM(Documents Object Model)を利用できるようになろう。

WebページはHTMLでマークアップされています。テキストを含み、Webページ上のあらゆる要素は何らかの形でマークアップされています。マークアップしている箇所を「要素(Element)」と言い、この要素をJavaScriptで操作をします。

もちろん、要素を指定する、ということだけがJavaScriptではありません。しかし、Webページを操作する場合はHTMLの要素を指定して様々な操作を行うことができるようになることがWebページの制作には欠かすことができません。

オブジェクトを利用できるようになることがJavaScriptの第一歩であり、HTMLが作り出したオブジェクトを構造化したものがDOMと呼ばれるものです。
JavaScriptによるHTMLを操作する、ということをDOMを操作するとよく言います。

下記のように操作したい要素を取得し、どのように操作するのか命令文を書くことになります。

//HTMLのp要素を指定する。
const element = document.querySelector('p');
//HTMLのp要素に指定されたclass[sample]を指定する。
const element_class = document.querySelector('p.sample');
//HTMLのp要素に指定されたclass[onlySample]を指定する。
const element_id = document.querySelector('p#onlySample');

簡単に操作をしたい場合は下記のように要素していからinnerTextを利用してテキストを差し替えることが可能です。
なお、上記のdocument.querySelectorは最初の要素を一つだけ読み込みます。
すべてを指定したい場合はdocument.querySelectorAllを使うことで可能です。

ここをJavaScriptで書き換えます。

<p class="sample">ここをJavaScriptで書き換えます。</p>
const element_class = document.querySelector('p.sample');
element_class.innerText = '実はここをJavaScriptで書き換えるというスクリプトを実行しています。';

innerText」は簡単に説明すれば要素のテキスト情報を取得できます。この場合は取得した上でテキストの指定をしているため、書き換わるように処理されます。

似たような処理として「textContent」と「innerHTML」があります。
textContent」は要素に含まれるテキスト情報のみを取得します。innerTextと変わらないように思えますがinnerTextは改行を示す情報なども取得することに対して、textContentはあくまでテキスト情報のみです。
innerHTML」はHTML要素を含んで取得することが可能です。そのためHTMLそのものを取得、書き換えを行いたいときに使われることが多いです。

// innerTextはテキスト情報及び改行などを含んで取得
element_class01.innerText = '書き換えたいテキスト';
// textContentはテキスト情報のみを取得
element_class02.textContent = '書き換えたいテキスト';
// innerHTMLはHTMLを含んだテキスト情報を取得
element_class03.innerHTML = '<p>書き換えたいテキスト</p>';

上記の書き方ですとWebページを読み込んだタイミングで実行してしまうため、後記の「イベント」を実行するということ、それと「タイミング」を指定する必要があります。

イベントとは#

イベントを起こすことで様々な動作を実行することが可能です。

ここまではあくまで制作者目線での書きぶりでしたが、Webページはあくまでユーザーが利用するものです。
ユーザーがボタンを押したタイミングで、なにかしらのイベントを実行するなどのプログラムを書くということも非常に多くあります。

変数.addEventListener('click',() => {
  関数内の処理
});

イベントリスナー(addEventListener)を設定することは非常に重要なことです。イベントを操作したいときに使用するため、必ず覚えておく必要があります。
上記のプログラムを書くことで、指定された箇所をクリックしたとき、処理を実行する、ということが可能になります。

タイミングについて#

タイミングは様々あり、イベントによって指定する必要がある。

クリックする以外にも様々なタイミングが指定可能なため、紹介します。

//要素をクリックしたとき
変数.addEventListener('click',() => {関数内の処理});
//要素の上にマウスポインタを当てたとき
変数.addEventListener('mouseover',() => {関数内の処理});
//要素の上にマウスポインタを要素から離したとき
変数.addEventListener('mouseout',() => {関数内の処理});
//要素の上にマウスボタンを押したとき
変数.addEventListener('mousedown',() => {関数内の処理});
//要素の上にマウスボタンを離したとき
変数.addEventListener('mouseup',() => {関数内の処理});
//要素にフォーカスが当たったとき
変数.addEventListener('focus',() => {関数内の処理});
//要素からフォーカスが外れたとき
変数.addEventListener('blur',() => {関数内の処理});
//キーボードが押された場合
変数.addEventListener('keydown',() => {関数内の処理});
//キーボードが押してから離した場合
変数.addEventListener('keyup',() => {関数内の処理});
//ページが読み込まれたとき
変数.addEventListener('onLoad',() => {関数内の処理});
//ページの読み込みが完了したとき
変数.addEventListener('load',() => {関数内の処理});
//フォームがサブミットされたとき
変数.addEventListener('submit',() => {関数内の処理});
//フォームがリセットされたとき
変数.addEventListener('reset',() => {関数内の処理});
//フォームの内容が変更されたとき
変数.addEventListener('change',() => {関数内の処理});
//ウィンドウがリサイズされたとき
変数.addEventListener('resize',() => {関数内の処理});
//イメージの読み込みが失敗したとき
変数.addEventListener('abort',() => {関数内の処理});
//読み込みが失敗したとき
変数.addEventListener('error',() => {関数内の処理});

テキストを書き換えるプログラム#

入力したテキストに書き換えるプログラム。

ここが書き換わります。

<input type="text" class="input_test">
<button class="button_test">ボタンを押して書き換える</button>
<p class="element_test">ここが書き換わります。</p>
const input_test = document.querySelector('.input_test');
const button_test = document.querySelector('.button_test');
const element_test = document.querySelector('.element_test');
button_test.addEventListener('click',()=> {
  element_test.innerText = input_test.value;
});

入力された長いテキストの置換を想定したプログラム。

ここが書き換わります。

<textarea cols="60" rows="5" id="textarea_test"
placeholder="ここにテキストを入力してください。">ここにテキストを入力してください。色々あって大変だけれど、私は泣いたことがない本当の愛と別れはいつもついてくる幸せの後ろをついてくるそれが私のくせなのかそいそいそい!!</textarea>
<input type="text" id="input_before">
<input type="text" id="input_after">
<button class="button_test2">ボタンを押して書き換える</button>
<p class="element_test2">ここが書き換わります。</p>
const tarea = document.querySelector('#textarea_test');
const fipt = document.querySelector('#input_before');
const repipt = document.querySelector('#input_after');
const btn2 = document.querySelector('.button_test2');
const tareb = document.querySelector('.element_test2');
btn2.addEventListener('click', () => {
  const input_before = fipt.value;
  const input_after = repipt.value;
  let tagtxt = tarea.value;
  tagtxt = tagtxt.replaceAll(input_before, input_after);
  const newelem = document.createElement('p.element_test2');
  tareb.innerText = tagtxt;
});

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san web design」の管理者。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

るり
未来へ繋がるWebの可能性。
お客様のサービスを、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。