Get attribute from HTML string (without jQuery)

Question

I'm trying to extract an image attribute from a HTML that's pulled in as a String.

Attempting to use https://stackoverflow.com/a/40311944/2981404 returns:

TypeError: Cannot read properties of undefined (reading 'slice')

My code is as follows:

const html[0] = '<img src="/img/image-example.png" class="image" title="What Im looking for..." alt="This is an example image">'
const startFromTitle = html[0].slice(
  html[0].search('title')
)
const title = startFromTitle.slice(5, startFromTitle.search(' ') - 1)
console.log(title) // expected "What Im looking for..."

I'd love to use jQuery, but on this project, I can't.

Declare html as an array first, before assigning html[0] a value. — GetSet
– GetSet, Commented Mar 13, 2022 at 18:06

Rohìt Jíndal · Accepted Answer · 2022-03-14 08:35:22Z

2

You can achieve this by creating a temporary div element in DOM :

const htmlStr = '<img src="/img/image-example.png" class="image" title="What Im looking for..." alt="This is an example image">';

var tmpDiv = document.createElement('div');
tmpDiv.innerHTML = htmlStr;

console.log(tmpDiv.querySelector('.image').getAttribute('title'));

answered Mar 14, 2022 at 8:35

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

Comments

Apollo79 · Accepted Answer · 2022-03-13 18:15:02Z

1

You must declare html as const first and then assign the html string to html[0].

And then you can remove title=" from the string (withoutTitle) and then search for '"' to find the end of the attribute.

const html = [];

html[0] = '<img src="/img/image-example.png" class="image" title="What Im looking for..." alt="This is an example image">';

const startFromTitle = html[0].slice(
  html[0].search('title')
);

const withoutTitle = startFromTitle.slice(
  7
);

const title = withoutTitle.slice(0, withoutTitle.search('"'));

console.log(title);

answered Mar 13, 2022 at 18:15

Apollo79

7045 silver badges15 bronze badges

1 Comment

Larm Over a year ago

Thanks, I should've included that line in my initial code. It does exist.

Collectives™ on Stack Overflow

Get attribute from HTML string (without jQuery)

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related