从HTML字符串中获取属性(不带jQuery)

Question

我正试图从作为字符串引入的HTML中提取一个图像属性。

正在尝试使用https://stackoverflow.com/a/40311944/2981404退货：

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

我的代码如下：

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..."

我很想使用jQuery，但在这个项目上，我做不到。

Answer 1

您可以通过在DOM中创建临时div元素来实现这一点：

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

Answer 2

必须首先将html声明为const，然后将html字符串分配给html[0]。

然后可以从字符串(withoutTitle(中删除title="，然后搜索'"'以查找属性的末尾。

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