如何在浏览器上显示元素的内容相同

Question

我尝试在元素内部获取内容，并且我希望它在浏览器上显示时是相同的

实施例

<pre class="yyy">Hello this is <span style="display: none;"> test </span> text </pre>

和

// how to alert (get) content like when it shown on browser: Hello this is  text
alert($(".yyy").html());

我希望警报结果是：Hello this is text在浏览器上显示时相同。那可能吗？该怎么做谢谢。

这是我的code

Answer 1

我会这样做：

alert($(".yyy").clone().find(':not(:visible)').remove().end().text());

Demonstration

Answer 2

我认为this正是您所寻找的。

jQuery.fn.visibleText = function() {
  return $.map(this.contents(), function(el) {
    if (el.nodeType === 3) {
      return $(el).text();
    }
    if ($(el).is(':visible')) {
      return $(el).visibleText();
    }
  }).join('');
};

alert($(".yyy").visibleText());

Here是一个小提琴。