Cheerio: .attr does not unescape and escape attribute values

Created on 9 Dec 2016 · 4Comments · Source: cheeriojs/cheerio

When setting or getting the value of an attribute using .attr, then those values should be escaped/unescaped otherwise invalide html is created when using $.html().

An example would be if you try to store JSON encoded data in an attribute:

$(elm).attr('data-test','{"key":"value"}');

Then the resulting html would be something like that:

<tag data-test="{"key":"value"}">

And if the element looks like this:

 <tag data-test="{&quot;key&quot;:&quot;value&quot;}">

Then $(elm).attr('data-test'); return {"key":"value"} instead of {"key":"value"}.

I have tested it with the version 0.22.0

Source

tndev

Most helpful comment

Load the document using the decodeEntities: false option, then the actual characters are used instead of HTML entities:

const cheerio = require('cheerio');
const $ = cheerio.load('<button data-test=""></button>', {
  decodeEntities: false
});
$('button').attr('data-test', '{"key":"value"}');
console.log($.html()); // <button data-test="{"key":"value"}"></button>

rickyblaha on 3 Mar 2017

👍3

All 4 comments

same problem on .text

TennyZhuang on 10 Dec 2016

same problem with .html()

ahmdsolmn on 6 Feb 2017

Load the document using the decodeEntities: false option, then the actual characters are used instead of HTML entities:

const cheerio = require('cheerio');
const $ = cheerio.load('<button data-test=""></button>', {
  decodeEntities: false
});
$('button').attr('data-test', '{"key":"value"}');
console.log($.html()); // <button data-test="{"key":"value"}"></button>

rickyblaha on 3 Mar 2017

👍3

The example above, <button data-test="{"key":"value"}"></button>, is invalid HTML: You are using double quotes to quote value with double quotes. This will result in all sorts of attributes being added to the tag.

Cheerio's intention is to produce valid markup, so this won't be supported (beyond the point it already is).