如何检查与显示:无样式相关的文本内容
How can I check text content with respect to display:none style
我想获取 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单元测试完全陌生,所以如果这不是要走的路,也请告诉我。
要记住的一些注意事项:您可以使用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>
如果你为你的风格应用一个类,比如.noDisplay { display:none; },你可以做一些类似div.find('span.noDisplay').remove()的事情;与jQuery
尝试以下操作。它将仅获取"可见"跨度的文本。
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').find('span').text("").parent().text();
您可以使用
jquery remove()
函数并应用于div children元素。
var div = $("<div><span style='display:none'>not </span>good</div>");
后立即添加div.children().remove();
,您将只获得"好"的内容
我想您需要过滤内容,并且应该针对为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"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
相关文章:
- 具有所有样式的文本正在复制到可编辑文本区域
- 将Div内容复制到文本区域或具有相同字体族样式的文本
- 为未标记的文本添加CSS样式
- 尝试在随机文本和图像脚本中添加样式/更改字体
- HTML + JS:设置文本区域内容样式的最佳方式
- 如何更改列表中一个元素中的文本样式
- 如何检查与显示:无样式相关的文本内容
- 如何使用 JavaScript 将样式应用于 CKEditor 中的选定文本
- 输入占位符文本转换CSS样式
- 如何优化动态生成多列文本样式
- GWT:如何从当前光标位置或所选文本中获取css样式的属性
- 用于丢失文本样式的脚注的Indesign脚本
- Jquery 在 ASP 文本框上添加样式不起作用
- 如何更改chardin.js中的文本颜色和样式
- 为HTML文本区域设置标题属性的样式
- 遵循 jquery Mobile 的文本框样式
- 将样式添加到文本区域的特定行
- 多语言丢失文本样式
- 将文本区域样式化,使其看起来像单独的输入框
- javascript中的换行/样式文本