如何检查文本内容的显示：无样式

Question

我想获取 DOM 节点的文本内容，但没有有效隐藏的元素（具有样式

display:none

）。

我了解 DOM

textContent

属性和 jQuery 的

text()

方法（我认为它无论如何都使用

textContent

），但它不尊重

display:none

:

var div = $("<div><span style='display:none'>not </span>good</div>");
var text = div.text(); // "not good"
var textContent = div[0].textContent; // "not good"

如何从该 div 中获取

"good"

内容？

我需要这个单元测试我的 AngularJS 指令。我正在使用 Jasmine 编写测试，我的测试与此类似：

    it('should check text ignoring hidden content', function() {
      $rootScope.hidden = true;
      var template = '<div><span ng-hide="hidden">not </span>good<div>';
      var element = $compile(template)($rootScope);
      $rootScope.$digest();

      console.debug(element.html());    // prints: '<span class="ng-hide" ng-hide="hidden">not </span>good<div></div>'
      console.debug(element.text());    // prints: 'not good'
      expect(element.text()).toEqual('good');   // oops, that fails :(
});

在我的实际测试中，我想测试我的自定义指令而不是

ng-hide

，但实际指令与该问题无关。

我对 Jasmine 和 Javascript 单元测试完全陌生，所以请让我知道这是否不是正确的方法。

Answer 1

需要记住的一些注意事项：您可以使用

clone()

来避免修改原始对象，但是要使用

:visible

，元素必须实际位于 DOM 中。

var sample = $("<div><span style='display:none'>not </span>good <div>content</div></div>");
var t = sample.clone();
$('body').append(t);
t.find('*:not(:visible)').remove();
t.remove();
alert(t.text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

如果您为您的样式应用一个类，例如 .noDisplay { display:none;你可以做类似 div.find('span.noDisplay').remove(); 的事情使用 jQuery

Answer 3

尝试以下操作。 它将仅获得“可见”跨度的文本。

  
  
  var text="";
   $("#content-div").find('span:visible').each(function(){         
       text=text+' '+$(this).text();         
   });
  
  alert(text);
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="content-div"><span >ok</span> <span style="display:none">hidden</span></div>

Answer 4

试试这个

 $('div').find('span').text("").parent().text();

Answer 5

有趣的是，没有人提到另一个属性

innerText

，它“知道样式并且不会返回“隐藏”元素的文本”（https://developer.mozilla.org/en-US/docs/ Web/API/节点/文本内容）。只需将

textContent

替换为

innerText

，即可完成一行修复。

Answer 6

您可以使用 jquery

remove()

函数并应用于 div 子元素。

在

div.children().remove();

之后添加

var div = $("<div><span style='display:none'>not </span>good</div>");

，您将只获得“好”内容

Answer 7

我想您需要过滤内容，并且您应该定位分配给

nodeType = 3

 的 

TEXT_NODE。

var div = $("<div><span style='display:none'>not </span>good</div>");
   
var textContent = div.contents().filter(function() {
  return this.nodeType == 3;
}).get(0).textContent; // "good"

$('body').html(textContent); // logs "good"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>