javascriptのtextContentについて

Question

ある要素内の文字数を計測しようと以下のようなコードを試したところ

<div>
  <p>A</p>
</div>

<script>
  var hoge = document.querySelector('div');
  console.log(hoge.textContent.length);
</script>

なぜか 8 が返ってきました…
（すいません 5 でした！）
調べてもわからず、ご教授お願いいたします。

Answer 1

改行や空白もカウントしているからでは。

var hoge = document.querySelector('div');
console.log(hoge.textContent.length,encodeURIComponent(hoge.textContent));
// 5 "%0A%20%20A%0A"
console.log(hoge.textContent.trim().length,encodeURIComponent(hoge.textContent.trim()));
// 1 A
```**動くサンプル：**[https://jsfiddle.net/tkazcxce/1/](https://jsfiddle.net/tkazcxce/1/)

Comments

[bfk]

サンプルまで書いていただいてありがとうございます！
innerText,InnerHTML,textContent がごっちゃになってしまいます…

Answer 2

pをインデントする文字もカウントしてるのでは？
(改行マークもカウントします)

追記

インデントや改行を除外

<div>
  <p>A</p>
</div>
<script>
var txt = document.querySelector('div').textContent;
txt=txt.replace(/^\s+|\r|\n/g,"");
console.log(txt.length);
</script>

上記行の先頭にある空白文字を削除していますが
場合によってはカウントしたい場合もあるので、ケースバイケースで
除外対象をどうしたいのか検討してください

Comments

[bfk]

ありがとうございます！知りませんでした！

Answer 3

#innerHTMLと勘違いしておりました。誤った回答のため、参考にしないようにお願いします。

---

textContentは指定エレメントの中の「タグを含めた」文字列を取得します。
lengthは文字数を取得します。

<p>A</p> 12345678

合ってますね。

Comments

[m.ts10806]

「タグを含めた」っていうと誤解を生むかもしれません。
タグ自体もhtmlで解釈させるまでは単なる文字列ですしね。

[bfk]

なるほど…！！ではinnerTextの方が文字列取得には良いということですね。ありがとうございます！

[yambejp]

ちがうよね？

<div><p>A</p></div>
<script>
var hoge = document.querySelector('div');
console.log(hoge.textContent.length);
</script>

で得られるのは「1」だし
innerHTMLとごっちゃにしてませんか？

[bfk]

試してみたらyambejpさんの言う通りでした…
純粋にテキストの数を取得するにはどうしたらよいのでしょうか…

[yambejp]

> 純粋にテキストの数を取得

インデントや改行マークをしないことです。
もしくはそれらをプログラムで除いた上でカウントしてください

[m.ts10806]

あれ？ごめんなさい。失礼しました。
bfkさん　ベストアンサーを移してください。

[yambejp]

ねんのため追記しておきました

[m.ts10806]

誤った回答である旨を冒頭に記載しました。

[bfk]

mts10806さん yambejpさん
ありがとうございます！ベストアンサー移させていただきました。