Store html code inside data attribute

Question

I need to be able to store formatted HTML inside data attribute later to be picked-up by jQuery in two formats:

1. HTML
2. Plain text

With my PHP I store HTML like this:

echo '<li data-desc="'. htmlspecialchars($myHTMLdescription) .'" class="myTerm">'. stripslashes($myItem) .'</li>';

Later I use JS to get the values:

$(document).on('click', '.myTerm', function() {
    var thisTerm    = $(this).text();
    var description = $(this).attr('data-desc');
    var descNoHTML = description.text();
});

descNoHTML seems to be breaking code if there are HTML elements like links inside the text.

Answer 1

Decode the encoded string using js

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}
$(document).on('click', '.myTerm', function() {
    var thisTerm    = $(this).text();
    var description = $(this).attr('data-desc');
    description  = decodeEntities(description );
    var descNoHTML = description.text();
});

Before asking any question directly, you should try to search for the same. There might be answer of your question. I think this link is helpful for you.

Answer 2

htmlspecialchars is for escaping characters in the main part of the HTML. For example, <, > and & are special characters in HTML. They can be escaped as <, > and &, respectively.

But the double-quotes for an attribute are a completely different environment. <>& are not special characters. The only special character is ". See https://www.w3.org/TR/html-markup/syntax.html#syntax-attributes . Actually I hadn't realised until now that you can't escape double-quotes, but that's what the spec says. So if you want to do it properly you'll have to escape them yourself, using an encoding of your choice, then unescape them when you read the attribute.

We can't use \" for ", because " isn't allowed at all. Let's encode " as %q. Then % is a special character, so let's encode it as %p. Your line of PHP then becomes:

$myEscapedHTMLdescription = str_replace(array('%', '"'), array('%p', '%q'), $myHTMLdescription);
echo '<li data-desc="'. $myEscapedHTMLdescription .'" class="myTerm">'. stripslashes($myItem) .'</li>';

See http://php.net/manual/en/function.str-replace.php . Then in the javascript you have to decode it:

var description = $(this).attr('data-desc')
    .replace(/%q/g, '"')
    .replace(/%p/g, '%');

This is mostly untested (I don't have PHP installed here), so there may be typos.

Answer 3

try:

var descNoHTML = $(description).text();