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

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptの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で取得した文字列の改行の扱いについてのご紹介でした！