如何检查关于 display:none 样式的文本内容答案

【问题标题】：How can I check text content with respect to display:none style如何检查关于 display:none 样式的文本内容
【发布时间】：2015-03-10 11:50:33
【问题描述】：

我想获取 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 单元测试完全陌生，所以如果这不是要走的路，请告诉我。

【问题讨论】：

@LShetty 你明白这个问题了吗？这是一个通用解决方案的问题，而不是这个具体案例。
糟糕！最终删除了我的评论。 @Nit，我知道你的意思。感谢您的推动。
@TMG good 不在span 标签中，这是错误的或您的需要。
如果是错误的，那么这对你有用var text = $("#test span:visible").text();
@charlietfl 你是什么意思？

标签： javascript jquery unit-testing dom angularjs-directive

【解决方案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());

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

这似乎完全符合我的要求！

【解决方案2】：

如果你为你的风格应用一个类，比如 .noDisplay { display:none;你可以做类似 div.find('span.noDisplay').remove();使用 jQuery

【讨论】：

【解决方案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>

【讨论】：

检查<div><span style='display:none'>not </span>good</div> good 不在span 标签中。
如果在span标签内则var text = $("#content-div span:visible").text(); 就够了。

【解决方案4】：

试试这个

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

【讨论】：

【解决方案5】：

您可以使用 jquery remove() 函数并应用于 div 子元素。

在var div = $("<div><span style='display:none'>not </span>good</div>"); 之后添加div.children().remove();，您只会得到“好”的内容

【讨论】：

这不是一个通用的答案。
@Nit，感谢您的评论。我的错误没有看到完整的问题。

【解决方案6】：

我猜你需要过滤内容，你应该定位分配给TEXT_NODE的nodeType = 3。

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"

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：