https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-the-textcontent-property-which-is-convenient-for-retrieving-and-rewriting-text-in-elements-with-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-the-textcontent-property-which-is-convenient-for-retrieving-and-rewriting-text-in-elements-with-javascript/

JavaScriptで要素内のテキストの取得・書き換えに便利なtextContentプロパティの使い方

要素内のテキストの取得・書き換えに便利なtextContent

JavaScriptで既存の要素内のテキストを取得したり、書き換えたりする場合はtextContentプロパティが便利ですし、セキュリティ的にも安全です。

textContentはHTMLタグを無視するので、純粋なテキストを取得します。

プロパティ

プロパティ意味
要素.textContent要素内のテキストを取得・書き換え文字列

サンプルコード

ページを開いてから3秒後と6秒後にテキストを2度入れ替えるシンプルなサンプルコードを紹介します。

本来必要ないですが、検証のためにテキスト内にspanタグを入れてテキストの一部を太字にしています。

3秒後に全く同じテキストで差し替えを行いますが、spanタグは入らないため、太字ではなくなります。HTMLタグは除外されるためです。

そのまた3秒後に、今度はテキストを「Hello World」に差し替えます。

Output
私は書き換え前のテキストよ
Pug
#targetText 私は<span class="font-weight-bold">書き換え前</span>のテキストよ
JavaScript
const targetText = document.getElementById('targetText');

setTimeout(() => {
	//テキストを取得します。
	let targetTextContent = targetText.textContent;
	//全く同じ値で書き換えますが、HTMLは除外されるので「書き換え前」が太字ではなくなります。
	targetText.textContent = targetTextContent;
}, 3000);

setTimeout(() => {
	//今度は6秒後にテキストを差し替えます。
targetText.textContent = 'Hello World';
}, 6000);
インストラクター
コメント

コメントを残す