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

實時測試用例。