I would like to get text content of a DOM node, but without elements that are effectively hidden (have style display:none
).
I know about DOM textContent
property and jQuery's text()
method (I think it uses textContent
anyway), but it doesn't respect 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"
How can I get just "good"
content from that div?
I need this unit test my AngularJS directive. I am writing tests using Jasmine and my test is something similar to that:
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 :(
});
In my real test I want to test my custom directive instead of ng-hide
, but the actual directive is irrelvant for that question.
I am completely new to Jasmine and Javascript unit testing, so please also let me know if this is just not the way to go.
A few considerations to keep in mind: you can use clone()
to avoid modifying the original object, however to use :visible
, the elements have to actually be in the 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>
if you apply a class for your style like .noDisplay { display:none; } you could do something like div.find('span.noDisplay').remove(); with jQuery
Try The following. It will get the text of only "Visible" spans.
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();
You can use jquery remove()
function and apply to the div children element.
Add div.children().remove();
right after var div = $("<div><span style='display:none'>not </span>good</div>");
and you will get only "good" content
I guess you need to filter the contents and you should target the nodeType = 3
which is assigned for 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.