【JavaScript】HTMLの文字列を取得する方法を解説！（innerHTML, textContent）

スポンサーリンク

JavaScriptでWebページのHTMLを取得する方法を知っていますか？

HTMLの文字列を取得することで、要素の内容を変更したり、コピーしたり、データとして保存することが可能になります。

JavaScriptには、innerHTML や textContent など、さまざまな方法でHTMLの文字列を取得する手段が用意されています。

この記事では、HTMLの文字列を取得する主要な方法を、サンプルコードとともに詳しく解説します。初心者の方でも理解しやすいように、基本から応用までをカバーしているので、ぜひ参考にしてみてください！

HTMLの文字列を取得する

JavaScriptでは、HTML要素の内容を文字列として取得するために、さまざまなプロパティが用意されています。代表的なものとして、innerHTML 、textContent の２つが挙げられます。

それぞれの特徴や使い方を詳しく見ていきましょう。

innerHTML：要素内のHTMLを取得する

innerHTML は、指定した要素の内部のHTMLを文字列として取得できます。
タグを含むすべての内容を取得できるため、HTMLを操作する際によく使われます。

使用例

<div id="example">
  <p>こんにちは、<strong>世界</strong>！</p>
</div>

<script>
  const element = document.getElementById("example");
  console.log(element.innerHTML); 
  // 結果: '<p>こんにちは、<strong>世界</strong>！</p>'
</script>

このように、innerHTML を使うと、要素内のタグ構造を含めたHTMLがそのまま取得できます。

注意点

innerHTML はHTMLの書き換えにも使用可能ですが、外部からの入力を直接設定すると、XSS（クロスサイトスクリプティング）のリスクがあります。
そのため、ユーザー入力を扱う場合は、適切なエスケープ処理を行うことが重要です。

textContent：テキストのみを取得する

textContent は、HTMLタグを含めずに、要素内のテキストのみを取得できます。
タグを削除して、純粋なテキスト情報が必要な場合に便利です。

使用例

<div id="example">
  <p>こんにちは、<strong>世界</strong>！</p>
</div>

<script>
  const element = document.getElementById("example");
  console.log(element.textContent);
  // 結果: 'こんにちは、世界！'
</script>

このように、textContent を使うと、HTMLタグが削除されて、テキストだけが抽出されます。

innerHTMLとの違い

  • innerHTML は タグを含めた文字列 を取得する
  • textContent は 純粋なテキストのみ を取得する

HTMLを編集・操作する場合は innerHTML を、テキストデータだけを扱いたい場合はtextContent を使うといいでしょう。

実用的な活用例を紹介

ここまで、JavaScriptでHTMLの文字列を取得する方法を解説しました。
それでは、実際に innerHTML や textContent を活用する具体的なシナリオを紹介します。

例１：特定の要素のテキストだけを抽出する

特定の部分のテキストだけを抜き出したい場合、textContent が役立ちます。
以下のコードでは、ボタンを押すと、div 内のテキストのみを取得して表示します。

コード例

<div id="article">
  <h2>ニュースタイトル</h2>
  <p>これはニュースの本文です。<span style="color: red;">重要！</span></p>
</div>
<button onclick="extractText()">テキストを取得</button>

<script>
  function extractText() {
    const text = document.getElementById("article").textContent;
    console.log(text);
    alert(text);
  }
</script>

ポイント

  • textContent を使うことで タグを含まないテキストのみ を取得可能
  • コンソールや alert を使ってテキストを確認

タグが含まれず、純粋なテキストデータが取得できるため、データ解析や検索機能の実装に活用できます。

フォーム入力値をHTMLとして取得し、保存する

フォームの入力内容をHTMLとして取得し、動的にページに反映させることも可能です。
以下のコードでは、ユーザーが入力したデータを innerHTML を使って表示します。

コード例

<input type="text" id="userInput" placeholder="メッセージを入力">
<button onclick="displayMessage()">表示</button>
<div id="output"></div>

<script>
  function displayMessage() {
    const input = document.getElementById("userInput").value;
    document.getElementById("output").innerHTML = `<p>${input}</p>`;
  }
</script>

ポイント

  • input.value でユーザーの入力を取得
  • innerHTML を使って div に反映
  • 入力内容がそのままHTMLとして表示される

しかし、この方法は XSS（クロスサイトスクリプティング） のリスクがあるため、実際のアプリでは エスケープ処理 を施すべきです。

まとめ

本記事では、JavaScriptを使ってHTMLの文字列を取得する方法について解説しました。

JavaScriptのHTML取得方法を適切に活用することで、Webアプリ開発やデータ処理の幅が広がります。
本記事を参考に、ぜひ実際のプロジェクトで活用してみてください！

スポンサーリンク

コメント