从 HTML 字符串中获取属性（没有 jQuery）

Question

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

正在尝试使用 returns:

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

您必须先将 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);

Answer 2

您可以通过在 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'));

从 HTML 字符串中获取属性（没有 jQuery）

Get attribute from HTML string (without jQuery)

javascript

string

slice