SYNCERのロゴ
アイキャッチ画像

HTMLElement.innerText - レンダリングされた状態のテキスト

innerTextは、HTMLElementのプロパティです。レンダリングされた状態のテキストを反映します。HTMLのタグは取り除かれますが、br要素による改行は反映されます。

概要

名前
innerText
所属
HTMLElement
IDL
[CEReactions] attribute [TreatNullAs=EmptyString] DOMString innerText;
仕様書
https://html.spec.whatwg.org/multipage/dom.html#dom-innertext

説明

チュートリアル

innerTextは、表示されているままのテキストを反映するプロパティです。タグは取り除かれ、テキストだけを返します。代入した場合、子孫は全てなくなり、代入した値のテキストだけが残ります。

<p id="hoge">SYNCERは、<span>2014年6月</span>からある<b>ウェブサイト</b>だ。</p>
// 要素の取得
var element = document.getElementById( "hoge" ) ;

// プロパティの取得
element.innerText ;	// "SYNCERは、2014年6月からあるウェブサイトだ。"

// プロパティに代入
element.innerText = "yeah" ;	// →<p id="hoge">yeah</p>

Node.textContentとinnerTextの違いは、br要素の取り扱いにあります。前者は、単純にテキストだけを繋ぎ合わせるため、br要素は取り除かれます。しかし後者は、改行文字に変換します。「表示されているままのテキストを反映する」というのはこういうことです。

<p id="hoge"><b>今日</b>は<br>いい<b>天気</b>だ。</p>

<!-- 表示のイメージ:
今日は
いい天気だ。
-->
// textContentの場合
element.textContent ;	// "今日はいい天気だ。"

// innerTextの場合
element.innerText ;	// "今日は(改行文字)いい天気だ。"

デモ

HTMLElement.innerTextを取得するデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap }
</style>
</head>
<body>
<p id="hoge">SYNCERは、<br><span>2014年6月</span>からある<br><b>ウェブサイト</b>だ。</p>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;

// 代入
// element.innerText = "hoge" + "\n" + "fuga" ;

// 取得
console.log( element.innerText ) ;
document.getElementById( "result" ).appendChild( new Text( element.innerText ) ) ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
45+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。