question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

.html() trims empty html attributes (class="" becomes class)

See original GitHub issue

Version: 1.0.0-rc.3

Input:

require('cheerio').load('<div class=""></div>').html();

Expected:

'<html><head></head><body><div class=""></div></body></html>'

Actual:

'<html><head></head><body><div class></div></body></html>'

jQuery Comparison:

$($.parseHTML('<div><div class=""></div></div>')).html();
// '<div class=""></div>'

I actually prefer the attributes being trimmed when empty. However, I am using Cheerio in a Jest Snapshot serializer, and would prefer it to have the least disruption as possible for my end users. So ideally it would have a setting to output attribute or attribute="" with the default being attribute="", to match jQuery’s .html(). This would allow me to pass along this option to my end users so they can pick based on preference.


Same outcome occurs when paired with htmlparser2.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
fb55commented, Dec 15, 2020

Cheerio uses two serializers under the hood. For HTML, it is usually parse5’s serializer. I’m happy to pull in changes from the serializer, but it is out of scope for cheerio to solve this.

1reaction
5saviahvcommented, Dec 13, 2020

Newer parse5 versions (I tested v5) generate ="" for every attribute even for boolean attributes.

Same time, people doesn’t like if it is added for boolean attributes like async or defer. parse5#184

Read more comments on GitHub >

github_iconTop Results From Across the Web

Checking if the class attribute is empty and then removing it if ...
Since having an empty class attribute doesn't hurt anything, I would not recommend removing it unless you have a massive page that needs...
Read more >
[Solved] Remove empty class="" from DOM? - CSS-Tricks
Wondering if there's a method for removing empty class strings from the DOM? ... (Remember, the HTML markup is not the DOM.
Read more >
empty - CSS: Cascading Style Sheets - MDN Web Docs
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace) ...
Read more >
sanitize-html - npm
Clean up user-submitted HTML, preserving allowlisted elements and allowlisted attributes on a per-element basis. Latest version: 2.8.1, ...
Read more >
:empty and :blank | Zell Liew
How to use the :empty selector and the :blank selector. ... If you don't use :empty , you need to rely on a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found