javascript - 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相反，对象不具有这样的属性。

而且由于删除标签是一项非常简单的任务，添加一个相当大的库是没有意义的（尽管只要你想用 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 节点。

您需要将 HTML 转换为 DOM（通过使用 JS 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 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);​

现场测试用例。