獲取innerText與jQuery而不是innerHTML

我有一個figcaption，我想從它的文本。這就是它在chrome元素檢查器中的樣子。由於某種原因，'innerHTML'以一個回報開始，然後是很多空格。然而'innerText'看起來不錯，所以我對此感興趣。獲取innerText與jQuery而不是innerHTML

enter image description here

網上我看到我必須使用text()方法來獲得的innerText，但它似乎給的innerHTML：

console.log("-"+$(this).find("figcaption").text()+"-");

enter image description here

所以，我怎樣才能到的innerText？

來源

2014-11-03 clankill3r

我認爲它確實返回innerText。注意結果輸出中沒有html標籤。 – Kolban 2014-11-03 18:26:38

你可以在'text（）'之後使用'replace'，如：'.replace（/（）{2，}/gi，「red」）'。它將刪除所有額外的空間。 – klauskpm 2014-11-03 18:32:31

@Kolban但dom中的innerText沒有空格。 – clankill3r 2014-11-03 18:41:18

當你創建一個HTML元素，如：

<p>Hello   World</p>

當由瀏覽器中呈現，空格默認處於摺疊狀態。結果將是「Hello World」。數據的崩潰發生在瀏覽器渲染時。瀏覽器中包含的DOM模型會維護包含其中包含的任何空白的實際文本。因此，您在屏幕上看到的內容可能與DOM中包含的數據不一樣。

通過稱爲「innerText」的DOM屬性可以獲取空白區域的數據。

A jsBin樣本顯示已提供數據。

演示代碼基本上是：

HTML

的JavaScript

$(function() { 
    $("button").click(function() { 
    console.log("text: " + $("#here").text()); 
    console.log("innerText: " + $("#here").prop("innerText")); 
    }); 
});

控制檯將日誌：

text: Hello  World 
innerText: Hello World

從您原來的問題來看，使用text()方法將返回DOM數據，而使用prop("innerText")則返回瀏覽器構建的計算出的innerText值。

來源

2014-11-03 18:31:57 Kolban

如果我在dom中查看（請參閱屏幕截圖OP），那麼innerHTML具有這些空格，但innerText卻沒有。所以假設innerText沒有需要編輯就可以。萬一它很重要，這是從tumblr添加照片的文本。所以那些添加了空格的東西無論如何都沒有意義。 – clankill3r 2014-11-03 18:45:00

感謝您的評論。我已經用更多的細節和樣本更新了答案。 – Kolban 2014-11-03 18:56:13

獲取innerText與jQuery而不是innerHTML

回答

相關問題