JavaScriptのtextContentプロパティによるテキスト取得のテクニック10選

JavaScriptのtextContentプロパティを使ったモダンなテキスト操作 JS
この記事は約19分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●textContentとは？

JavaScriptのtextContentプロパティは、HTML要素のテキストコンテンツを取得したり設定したりするために使用される強力なツールです。

Webデザイナーとして、クライアントからの要望に応えるためにJavaScriptの実践的なスキルを身につけることは非常に重要ですが、textContentプロパティの正しい使い方を理解することから始めるのが賢明でしょう。

textContentプロパティを使えば、HTML要素内のテキストを簡単に取得することができます。

たとえば、あるWebページ上の見出しやパラグラフの内容を取得したい場合、textContentプロパティを使うことで、そのテキストを変数に格納し、必要に応じて加工することができるのです。

これは、動的にWebページの内容を変更する際に非常に便利な機能です。

また、textContentプロパティを使って、HTML要素内のテキストを設定することもできます。

たとえば、ユーザーの入力に応じてWebページ上のメッセージを変更したい場合、JavaScriptでtextContentプロパティを使ってテキストを設定すれば、簡単に実現できます。

これにより、インタラクティブで魅力的なWebサイトを作成することができるでしょう。

○textContentの基本的な使い方

textContentプロパティの基本的な使い方を理解することは、JavaScriptを学び始めたばかりのWebデザイナーにとって非常に重要です。

まずは、HTML要素を取得する方法を知る必要があります。

document.getElementByIdやdocument.querySelectorなどのメソッドを使えば、特定のHTML要素を取得できます。

取得したHTML要素に対して、textContentプロパティを使うことで、そのテキストコンテンツを取得したり設定したりできます。

たとえば、id属性が”heading”である要素のテキストを取得する場合は、次のようなコードを書くことができます。

const headingElement = document.getElementById("heading");
const headingText = headingElement.textContent;

これにより、headingTextという変数にheadingElement要素のテキストコンテンツが格納されます。

○サンプルコード1：要素のテキストコンテンツを取得する

実際にtextContentプロパティを使って、HTML要素のテキストコンテンツを取得してみましょう。

ここでは、id属性が”paragraph”であるp要素のテキストを取得し、コンソールに出力するサンプルコードを見てみましょう。

<p id="paragraph">これはサンプルの段落です。</p>
const paragraphElement = document.getElementById("paragraph");
const paragraphText = paragraphElement.textContent;
console.log(paragraphText);

このコードを実行すると、コンソールに”これはサンプルの段落です。”と出力されます。

textContentプロパティを使えば、このようにシンプルにテキストコンテンツを取得できます。

○サンプルコード2：要素のテキストコンテンツを設定する

次に、textContentプロパティを使ってHTML要素のテキストコンテンツを設定してみましょう。

id属性が”message”であるdiv要素のテキストを、ボタンのクリックイベントで変更するサンプルコードを紹介します。

<div id="message">こんにちは！</div>
<button id="changeButton">メッセージを変更</button>
const messageElement = document.getElementById("message");
const changeButton = document.getElementById("changeButton");

changeButton.addEventListener("click", function() {
  messageElement.textContent = "メッセージが変更されました！";
});

このコードでは、changeButtonをクリックすると、messageElementのテキストコンテンツが”メッセージが変更されました！”に変更されます。

このように、textContentプロパティを使えば、動的にテキストを変更することができるのです。

●textContentとinnerTextの違い

JavaScriptを学び始めたWebデザイナーの皆さん、textContentプロパティの使い方には少し慣れてきたでしょうか？

ここで、似たような機能を持つinnerTextプロパティとの違いについて理解を深めておくことが重要です。

両者の違いを知ることで、状況に応じて適切なプロパティを選択できるようになります。

innerTextプロパティも、HTML要素のテキストを取得したり設定したりするために使用されますが、textContentとは微妙に動作が異なります。

この違いを理解しておくことで、コードを書く際の混乱を避けることができるでしょう。

それでは、textContentとinnerTextの違いについて、具体的なサンプルコードを交えながら見ていきましょう。

○サンプルコード3：textContentとinnerTextの動作の違い

textContentとinnerTextの動作の違いを示すサンプルコードを見てみましょう。

下記のようなHTMLがあるとします。

<div id="myElement">
  <p>この部分は<strong>強調</strong>されています。</p>
  <script>
    // このスクリプトは無視されます。
  </script>
</div>

このHTML要素に対して、textContentとinnerTextを使ってテキストを取得してみます。

const myElement = document.getElementById("myElement");
console.log(myElement.textContent);
console.log(myElement.innerText);

コンソールの出力結果は次のようになります。

  この部分は強調されています。
  // このスクリプトは無視されます。

この部分は強調されています。

textContentは、スクリプトやスタイルの内容も含めて、要素内のすべてのテキストを取得します。

一方、innerTextは、人間が読むことができるテキストのみを取得し、スクリプトやスタイルの内容は無視されます。

○サンプルコード4：改行とホワイトスペースの扱い方の違い

textContentとinnerTextのもう一つの重要な違いは、改行とホワイトスペースの扱い方です。

次のようなHTMLを考えてみましょう。

<div id="myElement">
  <p>この部分は
    複数行に
    渡っています。
  </p>
</div>

このHTML要素に対して、textContentとinnerTextを使ってテキストを取得します。

const myElement = document.getElementById("myElement");
console.log(myElement.textContent);
console.log(myElement.innerText);

コンソールの出力結果は次のようになります。

  この部分は
    複数行に
    渡っています。

この部分は 複数行に 渡っています。

textContentは、改行やホワイトスペースをそのまま保持しますが、innerTextは、余分な空白を削除し、改行を単一のスペースに置き換えます。

これは、innerTextがブラウザに表示されるテキストを反映しているためです。

○サンプルコード5：パフォーマンスの比較

textContentとinnerTextのパフォーマンスを比較してみましょう。

次のようなサンプルコードを使って、大量の要素に対してテキストを取得する場合の実行時間を測定します。

const elements = document.getElementsByTagName("p");
console.time("textContent");
for (let i = 0; i < elements.length; i++) {
  const text = elements[i].textContent;
}
console.timeEnd("textContent");

console.time("innerText");
for (let i = 0; i < elements.length; i++) {
  const text = elements[i].innerText;
}
console.timeEnd("innerText");

一般的に、textContentの方がinnerTextよりも高速です。

これは、innerTextがブラウザのレンダリングを考慮しているためです。

ただし、パフォーマンスの差は状況によって異なるため、実際のユースケースに基づいて適切なプロパティを選択することが重要です。

●textContentとinnerHTMLの違い

JavaScriptを学ぶ過程で、textContentやinnerTextに加えて、innerHTMLプロパティについても理解を深める必要があります。

innerHTMLは、HTML要素の内容を取得したり設定したりするために使用されますが、textContentとは異なる特徴を持っています。

これらの違いを知ることで、状況に応じて適切なプロパティを選択し、効果的にJavaScriptを活用できるようになるでしょう。

innerHTMLは、HTML要素の内容全体を文字列として扱います。

つまり、HTML要素内のテキストだけでなく、タグや属性も含めて取得・設定できるのです。

一方、textContentは、HTML要素内のテキストのみを扱い、タグや属性は無視されます。

この違いを理解することが、JavaScriptを使ったWeb開発において重要なポイントになります。

○サンプルコード6：textContentとinnerHTMLの動作の違い

textContentとinnerHTMLの動作の違いを表すサンプルコードを見てみましょう。

次のようなHTMLがあるとします。

<div id="myElement">
  <p>この部分は<strong>強調</strong>されています。</p>
</div>

このHTML要素に対して、textContentとinnerHTMLを使って内容を取得してみます。

const myElement = document.getElementById("myElement");
console.log(myElement.textContent);
console.log(myElement.innerHTML);

コンソールの出力結果は次のようになります。

  この部分は強調されています。

  <p>この部分は<strong>強調</strong>されています。</p>

textContentは、HTML要素内のテキストのみを取得しますが、innerHTMLは、HTML要素内のテキストとタグを含めた全体を取得します。

この違いを理解しておくことで、必要に応じて適切なプロパティを選択できるようになります。

○サンプルコード7：HTMLタグの扱い方の違い

textContentとinnerHTMLのHTMLタグの扱い方の違いを表すサンプルコードを見てみましょう。

const myElement = document.getElementById("myElement");
myElement.textContent = "<p>新しいテキスト</p>";
console.log(myElement.innerHTML);

myElement.innerHTML = "<p>新しいHTML</p>";
console.log(myElement.innerHTML);

コンソールの出力結果は次のようになります。

&lt;p&gt;新しいテキスト&lt;/p&gt;
<p>新しいHTML</p>

textContentに文字列を設定すると、HTMLタグはエスケープされてプレーンテキストとして扱われます。

一方、innerHTMLに文字列を設定すると、その文字列はHTMLとして解釈され、新しいHTML要素として追加されます。

●よくあるエラーと対処法

JavaScriptを学ぶ過程で、textContentプロパティを使う際によく遭遇するエラーとその対処法について理解しておくことが重要です。

これらのエラーは、初心者のWebデザイナーが陥りやすい落とし穴ですが、適切な知識を持っていれば、問題を迅速に解決できるようになります。

ここでは、よくあるエラーとその対処法について、具体的なサンプルコードを交えながら解説していきます。

○TypeError: Cannot read property ‘textContent’ of null

このエラーは、JavaScriptがHTML要素を見つけられない場合に発生します。

要素が存在しないか、IDやクラス名が間違っていることが原因である可能性があります。

たとえば、このようなコードがあるとします。

<div id="myElement">テキストコンテンツ</div>
const element = document.getElementById("myElement2");
console.log(element.textContent);

この場合、”myElement2″という IDを持つ要素が存在しないため、element は null となり、textContent プロパティにアクセスしようとするとエラーが発生します。

対処法としては、IDやクラス名が正しいことを確認し、JavaScriptコードが HTML要素の後に読み込まれていることを確認します。

また、null チェックを行って、要素が存在する場合にのみ textContent プロパティにアクセスするようにするとよいでしょう。

const element = document.getElementById("myElement");
if (element !== null) {
  console.log(element.textContent);
}

○textContentで取得したテキストが思った通りに表示されない

textContentで取得したテキストが思った通りに表示されない場合、HTMLタグや改行、余分なスペースが含まれている可能性があります。

たとえば、このようなHTMLがあるとします。

<div id="myElement">
  <p>This is a <strong>sample</strong> text.</p>
</div>
const element = document.getElementById("myElement");
console.log(element.textContent);

この場合、コンソールにはこのように表示されます。

  This is a sample text.

HTMLタグや改行、余分なスペースが含まれているため、思った通りの表示にならないことがあります。

対処法としては、正規表現を使ってHTMLタグや余分なスペースを取り除くことができます。

const element = document.getElementById("myElement");
const text = element.textContent.replace(/<[^>]*>/g, "").trim();
console.log(text);

この例では、正規表現 /<[^>]*>/g を使ってHTMLタグを取り除き、trim() メソッドで前後の空白を取り除いています。

○textContentで設定したテキストが反映されない

textContentで設定したテキストが反映されない場合、HTMLタグが含まれていたり、誤ってタグを設定したりしている可能性があります。

たとえば、次のようなコードがあるとします。

<div id="myElement">元のテキスト</div>
const element = document.getElementById("myElement");
element.textContent = "<p>新しいテキスト</p>";

この場合、意図していたのは “新しいテキスト” を設定することでしたが、<p> タグがそのままテキストとして扱われてしまいます。

対処法としては、HTMLタグを含まない、プレーンなテキストを設定するようにします。

HTMLタグを含めたい場合は、innerHTML プロパティを使用します。

const element = document.getElementById("myElement");
element.textContent = "新しいテキスト";

JavaScriptを学ぶ過程で、エラーに遭遇することは避けられません。

しかし、よくあるエラーとその対処法を理解しておけば、問題を迅速に解決し、スムーズに開発を進めることができるでしょう。

●textContentの応用例

JavaScriptのtextContentプロパティを使いこなせるようになったら、より実践的なシーンで活用していきたいですよね。

ここでは、textContentプロパティを応用した便利なテクニックをいくつか紹介します。

このテクニックを身につけることで、Webデザイナーとしてのスキルがさらに磨かれるでしょう。

○サンプルコード8：複数の要素のテキストコンテンツを一括で取得する

複数の要素からテキストコンテンツを一括で取得したい場合、querySelectorAllメソッドとtextContentプロパティを組み合わせることで実現できます。

次のようなHTMLがあるとします。

<ul id="myList">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

このリスト項目のテキストを一括で取得するには、次のようなJavaScriptコードを書きます。

const listItems = document.querySelectorAll("#myList li");
const texts = Array.from(listItems).map(item => item.textContent);
console.log(texts);

このコードでは、querySelectorAllメソッドを使って、id属性が”myList”のul要素内のすべてのli要素を取得しています。

次に、Array.fromメソッドを使ってNodeListをArrayに変換し、mapメソッドを使って各li要素のtextContentプロパティの値を取得しています。

最終的に、テキストの配列がtexts変数に格納されます。

○サンプルコード9：テキストコンテンツを検索してハイライトする

Webページ内の特定のキーワードを検索し、マッチした部分をハイライトする機能を実装してみましょう。

次のようなHTMLがあるとします。

<div id="myArticle">
  <p>これは検索機能のデモンストレーションです。</p>
  <p>検索キーワードに一致する部分がハイライトされます。</p>
  <p>この機能は、JavaScriptのtextContentプロパティを使って実装されています。</p>
</div>

次のようなJavaScriptコードを書くことで、検索とハイライト機能を実装できます。

function searchAndHighlight(keyword) {
  const article = document.getElementById("myArticle");
  const text = article.textContent;
  const regex = new RegExp(keyword, "gi");
  const matches = text.match(regex);

  if (matches) {
    const highlightedText = text.replace(regex, `<mark>${keyword}</mark>`);
    article.innerHTML = highlightedText;
  }
}

searchAndHighlight("検索");

この関数では、まず、id属性が”myArticle”のdiv要素を取得し、そのテキストコンテンツをtextContentプロパティで取得しています。

次に、RegExpオブジェクトを使って、キーワードに一致する部分を検索しています。

一致する部分が見つかった場合、replace メソッドを使ってキーワードを<mark>タグで囲み、ハイライトしています。

最後に、innerHTMLプロパティを使って、元のHTML要素の内容を、ハイライトされたテキストに置き換えています。

○サンプルコード10：テキストコンテンツを動的に置換する

Webページ上のテキストを動的に置換する機能を実装してみましょう。

次のようなHTMLがあるとします。

<p id="myParagraph">これは置換前のテキストです。</p>
<button id="replaceButton">テキストを置換</button>

次のようなJavaScriptコードを書くことで、ボタンクリック時にテキストを置換できます。

const paragraph = document.getElementById("myParagraph");
const replaceButton = document.getElementById("replaceButton");

replaceButton.addEventListener("click", function() {
  paragraph.textContent = "これは置換後のテキストです。";
});

このコードでは、id属性が”myParagraph”のp要素と、id属性が”replaceButton”のbutton要素を取得しています。

そして、ボタンのclickイベントリスナーを設定し、クリック時にp要素のtextContentプロパティを使って、テキストを置換しています。

まとめ

JavaScriptのtextContentプロパティは、HTML要素のテキストコンテンツを取得したり設定したりするために非常に便利なツールです。

今回は、textContentプロパティの基本的な使い方から、innerTextやinnerHTMLとの違い、よくあるエラーと対処法、さらには応用例まで、幅広く解説してきました。

textContentプロパティを使いこなすことで、Webページ上のテキストを自在に操作できるようになります。

これは、Webデザイナーやフロントエンドエンジニアにとって欠かせないスキルの一つです。

サンプルコードを参考に、実際にコードを書いて試してみることで、理解がさらに深まるでしょう。

これからもJavaScriptの学習を続け、textContentプロパティをはじめとする様々なテクニックを身につけていってください。

そうすることで、より高度なWebデザインやフロントエンド開発が可能になります。

今回学んだことを活かして、自分なりのアイデアを実装してみてください。JavaScriptの世界は無限の可能性に満ちています。