File size: 1,615 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/**
* When inside a double-quoted attribute value, only `&` and `"` hold special meaning.
* @see https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state
* @type {Record<string, string>}
*/
const escape_html_attr_dict = {
'&': '&',
'"': '"'
};
const escape_html_attr_regex = new RegExp(
// special characters
`[${Object.keys(escape_html_attr_dict).join('')}]|` +
// high surrogate without paired low surrogate
'[\\ud800-\\udbff](?![\\udc00-\\udfff])|' +
// a valid surrogate pair, the only match with 2 code units
// we match it so that we can match unpaired low surrogates in the same pass
// TODO: use lookbehind assertions once they are widely supported: (?<![\ud800-udbff])[\udc00-\udfff]
'[\\ud800-\\udbff][\\udc00-\\udfff]|' +
// unpaired low surrogate (see previous match)
'[\\udc00-\\udfff]',
'g'
);
/**
* Formats a string to be used as an attribute's value in raw HTML.
*
* It escapes unpaired surrogates (which are allowed in js strings but invalid in HTML), escapes
* characters that are special in attributes, and surrounds the whole string in double-quotes.
*
* @param {string} str
* @returns {string} Escaped string surrounded by double-quotes.
* @example const html = `<tag data-value=${escape_html_attr('value')}>...</tag>`;
*/
export function escape_html_attr(str) {
const escaped_str = str.replace(escape_html_attr_regex, (match) => {
if (match.length === 2) {
// valid surrogate pair
return match;
}
return escape_html_attr_dict[match] ?? `&#${match.charCodeAt(0)};`;
});
return `"${escaped_str}"`;
}
|