javascript - jQuery get text in element but ignore style tags - Stack Overflow

admin管理员组

文章数量:1401149

I have javascript code that tests if a div has some non whitespace text content.

This works but it cannot differentiate between text content or style tag declarations within the div and the test fails when there is no text content but a style tag with css data.

Question is how to test for empty text content while ignoring the style tag?

HTML:

<div id='test1'>
    <div>   </div>
</div>

<div id='test2'>
    <div>   </div>

<style>
.style1{
    border:1px;    
}        
</style>    

</div>

Javascript:

// Works
if($('#test1').text().trim().length==0){
    alert('test1 has no content!');
}    

// Does not work due to style1 declaration within style tag within div
if($('#test2').text().trim().length==0){
    alert('test2 has no content!');
}    

Test URL: /

I have javascript code that tests if a div has some non whitespace text content.

This works but it cannot differentiate between text content or style tag declarations within the div and the test fails when there is no text content but a style tag with css data.

Question is how to test for empty text content while ignoring the style tag?

HTML:

<div id='test1'>
    <div>   </div>
</div>

<div id='test2'>
    <div>   </div>

<style>
.style1{
    border:1px;    
}        
</style>    

</div>

Javascript:

// Works
if($('#test1').text().trim().length==0){
    alert('test1 has no content!');
}    

// Does not work due to style1 declaration within style tag within div
if($('#test2').text().trim().length==0){
    alert('test2 has no content!');
}    

Test URL: http://jsfiddle/sLDWB/

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 12, 2014 at 16:33 zafzaf 23.3k1212 gold badges6969 silver badges9696 bronze badges 5

• You could copy the node, then remove style tags, and then check. (To throw an idea out there) jsfiddle/sLDWB/3 (There must be better answers though) – towr Commented Jan 12, 2014 at 16:38
• Get the inner html and remove tags which you don't want to consider. – AbhinavRanjan Commented Jan 12, 2014 at 16:39
• 1 A style tag in the body won't validate; it's technically not correct (unless it's HTML5 scoped) – elclanrs Commented Jan 12, 2014 at 16:41
• 1 @elclanrs You sure about that? – zaf Commented Jan 12, 2014 at 16:42
• Pretty sure, at least in HTML4, but there's no point in putting it in the body, you gain nothing, you lose a few ms of unstyled content, so it's basically useless. Only scoped styles make sense in the body as they apply to the parent element. – elclanrs Commented Jan 12, 2014 at 16:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

One option is cloning the element and removing the style tags:

$.fn.isTextless = function() {
   var txt = this.first()
                 .clone()
                 .find('style')
                 .remove()
                 .end()
                 .text();

   return $.trim(txt).length === 0; 
}

if ( $('#test2').isTextless() ) {
    alert('test2 has no content!');
} 

http://jsfiddle/5Z3M4/

You can just use a mon class for all the elements you need to check, loop through them using each, store the initial HTML, remove the style tag, do your check and restore the initial HTML. Like so :

$('.testdiv').each(function() {
    var divHtml = $(this).html();
    $(this).find('style').remove();

    if($(this).text().trim().length==0){
        alert( $(this).attr('id') + ' has no content!');
    } 
    $(this).html(divHtml);
});

http://jsfiddle/sLDWB/1/

Subtract the style tag's length with the actual length.

Try,

if($('#test1').text().trim().length==0){
    alert('test1 has no content!');
}    

if($('#test2').text().trim().length - $('#test2 style').text().trim().length ==0){
    alert('test2 has no content!');
}

DEMO

Use following javascript code

document.getElementById('test2').innerText

The style tag is meant to go in the head of a page. Why do you even have .style1 there if no element uses style1? If you want to change the style of a div, either do <div style="border: 1px;"> or make a style declaration in the <head> part of the HTML page.

In short, you shouldn't ever have a <style> tag outside of <head>.

本文标签： javascriptjQuery get text in element but ignore style tagsStack Overflow