[自由研究]contenteditable属性のテキストをJavaSctiptで取得してみた

８月になり自由研究の季節がやってきましたね。
小学生・中学生の頃は貯金箱やら万華鏡やらありふれたものを作っていました。

研究テーマ

ところで皆さんはHTML5のcontenteditable属性をご存じでしょうか？

一言で言えば、「テキスト文を編集できるようにするもの」です。

そして今回、contenteditable属性で編集したテキストをJavaScriptでテキストを取得した時、ブラウザごとに挙動がどうなるかを調べたのでそれを自由研究としたいと思います。

用意したもの（検証ブラウザ）

Chrome：75.0.3770.142
Safari：12.1.2 (14607.3.9)
Firefox：68.0.1 (64 ビット)

実験内容

ブラウザごとに下記のようにしてHTML要素のテキストを取得してみる。
（１）テキストを消して空にした場合
（２）空にしたあとテキストを入力した場合
（３）テキストをコピーしてペーストした場合

方法

JSでのテキスト取得には下記の３パターンを用いました。

・innerHTML
・innerText
・textContent

いずれもテキスト内容を取得するものですがそれぞれ挙動が少し異なります。

・innerHTML
オブジェクト内のHTML要素を取得する

・innerText
オブジェクト内の文字列を取得して見やすいように変換してくれる

・textContent
オブジェクト内の文字列をHTMLに書かれている通りに取得する

sample.html

<div id="text1" contenteditable="true">こんにちは</div>
<button onclick="checkText()">ボタン</button>

sample.js

function checkText(){
  var text1 = document.querySelector("#text1");

  console.log(text1.innerHTML);
  console.log(text1.innerText);
  console.log(text1.textContent);
}

結果

上記のコードで（１）〜（３）をブラウザごとに実行した結果が以下になります。

（１）空にした場合

[Chrome]
""
""
""
[Safari]
"<br>"
"
" // 改行
""
[Firefox]
"<br>"
"
" // 改行
""

（２）空にしたあとテキストを入力した場合

[Chrome]
"こんにちは"
"こんにちは"
"こんにちは"
[Safari]
"こんにちは"
"こんにちは"
"こんにちは"
[Firefox]
"こんにちは<br>"
"こんにちは
"
"こんにちは"

（３）テキストをコピペした場合

[Chrome]
"こんにちは"
"こんにちは"
"こんにちは"
[Safari]
"こんにちは<br>"
"こんにちは
"
"こんにちは"
[Firefox]
"こんにちは"
"こんにちは"
"こんにちは"

考察

Chromeではテキストの取得方法に関わらず全て同じでした。
一方、SafariとFirefoxでは取得方法によって内容が異なることがわかりました。

もし、contenteditable属性を使ってテキスト内容をチェックする際は注意が必要ですね
（テキストが空かどうかの条件分岐など。ブラウザによって結果が異なってしまう。）

コードの詳細

CodePenにもまとめました