【JavaScript】textContentで取得した文字列の改行について

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptのtextContentで取得した文字列の改行の扱いについてご紹介したいと思います。

textContentで取得した文字列に改行が含まれないのはなんでだろう?

上記の疑問にお答えします。

では、解説していきます。

textContentはテキストのみを返すプロパティ

textContentは、Nodeのプロパティです。ノードの内側に存在するテキストを返します。返り値はテキストのみ(Node.nodeValue)であり、HTMLタグや改行コードは含まれません。

下記の実行結果を確認してみます。

<!-- HTML -->
<p>ダミーテキスト<span>ダミーテキスト</span>ダミーテキスト<br>ダミーテキスト</p>

<!-- JavaScript -->
<script>
const str = document.querySelector('p');
console.log(str.textContent);
</script>

コンソールの出力結果は下記の通りです。

"ダミーテキストダミーテキストダミーテキストダミーテキスト"

p要素内のHTMLタグは改行は削除され、テキストのみが出力されています。textContentの返り値には、HTMLタグや改行が含まれず、テキストのみであることが確認できました。

参照:https://developer.mozilla.org/ja/docs/Web/API/Node/textContent

改行を含む文字列を取得したい場合はどうするべきか

改行を含む文字列を取得したい場合はinnerTextを、HTMLタグも含む文字列が必要な場合はinnerHTMLを使用します。

innerText

innerTextは、Elementのプロパティです。指定した要素内に存在するレンダリングされているテキストを取得します。

<!-- HTML -->
<p>ダミーテキスト<span>ダミーテキスト</span>ダミーテキスト<br>ダミーテキスト</p>
<p>ダミーテキスト<span style="display: none;">ダミーテキストダミーテキストダミーテキスト</span></p>

<!-- JavaScript -->
<script>
const elements = document.querySelectorAll('p');

elements.forEach((element)=>{
    console.log(element.innerText);
});
</script>

実行結果は下記の通りです。

"ダミーテキストダミーテキストダミーテキスト
ダミーテキスト"
"ダミーテキスト"

改行は含まれていますが、レンダリングされていない要素のテキスト(style属性で非表示にした要素内のテキスト)は出力されていません。innerTextを使用する場合は、この点ご注意ください。

参考:https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/innerText

innerHTML

innerHTMLは、Elementのプロパティです。指定した要素内のHTMLを取得もしくは設定することができます。プロパティ名にある通り、要素内のHTMLをまるっと取得したり設定することができます。

<!-- HTML -->
<p>ダミーテキスト<span>ダミーテキスト</span>ダミーテキスト<br>ダミーテキスト</p>
<p>ダミーテキスト<span style="display: none;">ダミーテキストダミーテキストダミーテキスト</span></p>

<!-- JavaScript -->
<script>
const elements = document.querySelectorAll('p');

elements.forEach((element)=>{
    console.log(element.innerHTML);
});
</script>

実行結果は下記の通りです。

"ダミーテキスト<span>ダミーテキスト</span>ダミーテキスト<br>ダミーテキスト"
"ダミーテキスト<span style='display: none;'>ダミーテキストダミーテキストダミーテキスト</span>"

HTMLタグを含む文字列を取得しています。HTMLタグを含む文字列が必要な場合はinnerHTMLをご使用ください。

最後に

textContentが純粋なテキストのみを取得するためのプロパティであることをたまに忘れてしまうため、半ば自分を戒めるために記事にまとめてみました。これで恐らく忘れることはないだろうなと思いますが、もし忘れた場合はサイト内を検索して本記事の内容を確認することにします!

以上、JavaScriptのtextContentで取得した文字列の改行の扱いについてのご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。