HTMLElement: innerText プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

innerTextHTMLElement のプロパティで、ノードとその子孫の「レンダリングされている」テキスト内容を示します。

ゲッターとしては、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。 セッターとしては、この要素の子要素を指定された値で置き換え、すべての改行を <br> 要素に変換します。

メモ: innerTextNode.textContent と混同しやすいのですが、両者には重要な違いがあります。基本的に innerText はテキストがレンダリングされる外見を意識しますが、 textContent はそうではありません。

文字列で、要素の表示されたテキストの内容を表します。

要素自身が表示されないとき(例えば、文書から切り離されたり、表示から隠されたりしている場合)、返値は Node.textContent プロパティと同じ値になります。

警告: innerText をノードに設定すると、そのノードの すべての 子ノードが取り除かれ、指定した文字列値のテキストノード 1 つに置き換えられます。

この例では innerTextNode.textContent を比較しています。 innerText<br> 要素のようなものをどのように意識するかや、非表示の要素を無視することに注意してください。

HTML

html
<h3>元の要素:</h3>
<p id="source">
  <style>
    #source {
      color: red;
    }
    #text {
      text-transform: uppercase;
    }
  </style>
  <span id="text">
    このテキストが<br />
    どう扱われるか<br />
    下で見てみてください。
  </span>
  <span style="display:none">隠しテキスト</span>
</p>
<h3>textContent の結果:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly></textarea>
<h3>innerText の結果:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly></textarea>

JavaScript

js
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;

結果

仕様書

Specification
HTML
# the-innertext-idl-attribute

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
innerText
Can be set with TrustedScript instances in HTMLScriptElement.

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.

関連情報