Find certain data in string with JavaScript

Question

I have a string in JavaScript application:

const articleBody = "<div class=\"article\" data-id=\"123456\" data-title=\"Some long article title\">Article content goes here.</div>"

There is no way for me to set this as HTML and then get data- values as I would normally do, so I need to "extract" data- attribute values from string. In the end I need to have something like that:

const id="123456"
const title="Some long article title"

How would I do that with JavaScript?

Thank you!

"There is no way for me to set this as HTML and then get data- values as I would normally do" Why not? — Heretic Monkey
– Heretic Monkey, Commented Dec 18, 2019 at 13:56
Does this answer your question? Creating a new DOM element from an HTML string using built-in DOM methods or Prototype — Heretic Monkey
– Heretic Monkey, Commented Dec 18, 2019 at 15:40

Heretic Monkey · Accepted Answer · 2019-12-18 15:37:52Z

1

Take up the string and try converting it into HTML template using document.createElement..

const template = document.createElement('div');
template.innerHTML = articleBody;

Then you can use getAttribute method to retrieve the value of the attribute you wish to fetch..

const id = template.querySelector('.article').getAttribute("data-id");
const title = template.querySelector('.article').getAttribute("data-title");

And the expected solution can be formed as,

const articleBody = "<div class=\"article\" data-id=\"123456\" data-title=\"Some long article title\">Article content goes here.</div>"


const template = document.createElement('div');
template.innerHTML = articleBody;

const id = template.querySelector('.article').getAttribute("data-id");
const title = template.querySelector('.article').getAttribute("data-title");

console.log(id, title);

edited Dec 18, 2019 at 15:37

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

answered Dec 18, 2019 at 14:15

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

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

Comments

igg · Accepted Answer · 2019-12-18 14:22:48Z

0

You can use template.

const articleBody = "<div class=\"article\" data-id=\"123456\" data-title=\"Some long article title\">Article content goes here.</div>"

const template = document.createElement('template');
template.innerHTML = articleBody;
const article = template.content.children[0];

const {
  id,
  title
} = article.dataset;

console.log(id, title);

answered Dec 18, 2019 at 14:22

igg

2,2803 gold badges13 silver badges37 bronze badges

Comments

Constantin Trepadus · Accepted Answer · 2019-12-18 14:36:59Z

0

Here you can use this script here, it will split your string to array, get the attribute, get numbers from it with regex and parse it to int:

var str = "<div class=\"article\" data-id=\"1234576\" data-title=\"Some long article title\">Article content goes here.</div>";
var attribute = str.split(" ").filter(item =>{
  return item.includes("data-id");
});
var result = attribute.toString().replace( /^\D+/g, '').match(/\d+/)[0];
console.log(parseInt(result));

answered Dec 18, 2019 at 14:36

Constantin Trepadus

5133 silver badges10 bronze badges

Collectives™ on Stack Overflow

Find certain data in string with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related