0

I have some HTML code as a string. For example,

<button data-a=12 data-b=444 data-c='xyz'>Reply</button>

This string is stored in a variable in Javascript. There can be any number of data attributes in the string. The value of each attribute can be anything. I have to extract the value of a particular attribute, say data-b, for this case.

Apart from the obvious string manipulations, is there a more concise way to somehow de-stringify this "stringy" HTML code and extract the data-attribute value using jQuery? Is there another better way to do this? Which one is the best with regards to efficiency and readability?

Edit: The values of some of these attributes (other than the one I want to extract) come from user input. I use a sanitizer library before rendering those inputs as data attribute values, so the string should be XSS safe, but it can look very weird. For example, this string could be,

<button data-a=10 data-b=76 data-c='>1' alert(502); data-d=34>Reply</button>

Nikhil
  • 61
  • 1
  • 6

1 Answers1

3

For elegance, I'd prefer to use DOMParser:

const str = `<button data-a=12 data-b=444 data-c='xyz'>Reply</button>`;
const { b } = new DOMParser().parseFromString(str, 'text/html').querySelector('button').dataset;
console.log(b);

It's not entirely concise, but it's easy to understand.

If the string is trustworthy (and XSS isn't something to worry about) you could also create an element and set its innerHTML to the input string with jQuery:

const str = `<button data-a=12 data-b=444 data-c='xyz'>Reply</button>`;
const b = $(str).data('b');
console.log(b);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

(but if the input isn't trustworthy, the jQuery approach is a security risk:

const str = `<img src onerror="alert('evil')" data-a=12 data-b=444 data-c='xyz' />`;
const b = $(str).data('b');
console.log(b);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

)

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • Thanks, I didn't realise that XSS safeness would be a parameter to judge approaches. I have edited the question now to better reflect my situation. Does the DOMParser method still hold good after the edit? – Nikhil Nov 26 '20 at 15:39
  • 1
    If the input is sanitized, and you trust the sanitizer, then either approach works. Though, I'd personally prefer DOMParser because it doesn't require relying on a big external library - it's completely built into the browser. – CertainPerformance Nov 26 '20 at 15:43
  • Thank you very much! – Nikhil Nov 26 '20 at 15:56