javascript - Javascript textContent が undefined を返す

Question

これは私のコードです:

var text1 = "↵,<strong>bla bla</strong>";//here text1 has value
text1 = text1.textContent;//here it is undefined

なんで？そして、それを解決する方法は？

Answer 1

text1はプレーンな文字列であり、DOM要素ではありません。

MDNでわかるように、はオブジェクトtextContentのプロパティです。それどころか、オブジェクトにはそのようなプロパティはありません。NodeString

また、タグの削除は非常に単純なタスクであり、かなり大きなライブラリを追加することは意味がありません（ただし、DOMでさらに多くのことを実行したい場合は、jQueryは優れています）。これを行う簡単な方法は次のとおりです。

var elem = document.createElement('div');
elem.innerHTML = '<strong>hi &amp; bye</strong>';
alert(elem.textContent || elem.innerText || ''); // displays "hi & bte"

Answer 2

text1は文字列であり、DOMノードではありません。

innerHTMLHTMLでDOMメソッドを使用する前に、HTMLをDOMに変換する必要があります（JS DOMパーサーを使用してドキュメントに追加するか、JS DOMパーサーを作成/検索することにより）。

Answer 3

他の人が答えてくれたので、コメントします。

textContentは DOM 3 Core (約 8 年) から存在していますが、ほとんどのブラウザーは (MS 独自の) innerText プロパティを実装しています。したがって、ノードがある場合は、次のことができます。

var theTextContent = typeof node.textContent == 'string'? node.textContent : node.innerText;

または、より堅牢な関数を記述します。

編集

完全な解決策は次のとおりです。

function getText(el) {
  return el.textContent || el.innerText || '';
}

var text1 = "<strong>bla bla</strong>"
var d = document.createElement('div');
d.innerHTML = text1;

alert(getText(d)); // bla bla

Answer 4

このようなタスクにはjQueryを使用できます。

最初にjQueryライブラリへの参照を追加し、次にこれと同じくらい簡単です。

var text1 = "↵,<strong>bla bla</strong>";//here text1 has value
text1 = $("<div>").html(text1).text();
alert(text1);​

ライブテストケース。