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.
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);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'));