Javascript textContent 返回未定义

Question

这是我的代码：

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

为什么？ 以及如何解决？

Answer 1

text1是一个纯字符串，而不是 DOM 元素。

正如您在 MDN中看到的， textContent是Node对象的一个属性。 相反， String对象没有这样的属性。

由于删除标签是一项非常简单的任务，因此添加一个相当大的库没有意义（尽管 jQuery 在您想使用 DOM 做更多事情时就很棒），这是一个简单的方法：

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

Answer 2

text1是一个字符串，而不是 DOM 节点。

您需要将 HTML 转换为 DOM（通过使用innerHTML将其添加到文档或通过编写/查找 JS DOM 解析器），然后才能在其上使用 DOM 方法。

Answer 3

其他人已经给了你答案，我只是评论。

虽然textContent自 DOM 3 Core 以来一直存在（大约 8 年），但大多数浏览器都实现了（MS 专有的） innerText属性。 所以如果你有一个节点，你可以这样做：

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

或者写一个更健壮的 function。

编辑

这是一个完整的解决方案：

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);​

实时测试用例。