Storing HTML Within Attribute

Question

I'm storing HTML code within an element attribute like so.

<div data-html-code="<iframe width="560" height="315" src="https://www.youtube.com/embed/sNhhvQGsMEc" frameborder="0" allowfullscreen></iframe>"></div>

How can I escape all the necessary characters to make this valid using jQuery/Javascript?

replace double quotes with single quote or by escape them by \" \". Like this : jsfiddle.net/DinoMyte/c8jzo021 — DinoMyte
– DinoMyte, Commented Feb 9, 2016 at 18:11
use single quotes like this <div data-html-code='<iframe width="560" height="315" src="https://www.youtube.com/embed/sNhhvQGsMEc" frameborder="0" allowfullscreen></iframe>'></div> — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Feb 9, 2016 at 18:12
How do I do this dynamically, When code is entered in an input field? Also would escaping '<', '>' also be necessary? — user3758078
– user3758078, Commented Feb 9, 2016 at 18:15

gurvinder372 · Accepted Answer · 2016-02-09 18:13:09Z

1

use this htmlEscape method

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

this should give you a string that can be used as a valid html attribute value

answered Feb 9, 2016 at 18:13

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Storing HTML Within Attribute

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related