如何在脚本中获取HTML标签数据？

Question

我有一个字符串：

var str = `<ul class="errorlist"><li>Enter a valid email address.</li></ul>`;

如何从该字符串中提取子字符串：

'Enter a valid email address.'

放入另一个变量？

Answer 1

如果文本不可信，最安全（也可能是最精美）的选项是使用DOMParser将文本转换为文档，然后在文档中选择li：

const str = `<ul class="errorlist"><li>Enter a valid email address.</li></ul>`;
const doc = new DOMParser().parseFromString(str, 'text/html');
const a = doc.querySelector('li').textContent;
console.log(a);

您可能会想使用新创建的元素的innerHTML：

const str = `<ul class="errorlist"><li>Enter a valid email address.</li></ul>`;
const container = document.createElement('div');
container.innerHTML = str;
const a = container.querySelector('li').textContent;
console.log(a);

但这是不安全的，因为可能执行error内联处理程序：

const str = `<ul class="errorlist"><li><img src="" onerror="alert('evil')">Enter a valid email address.</li></ul>`;
const container = document.createElement('div');
container.innerHTML = str;
const a = container.querySelector('li').textContent;
console.log(a);

DOMParser没有相同的漏洞-即使输入字符串不可信任，您也可以安全地使用它。

const str = `<ul class="errorlist"><li><img src="" onerror="alert('evil')">Enter a valid email address.</li></ul>`;
const doc = new DOMParser().parseFromString(str, 'text/html');
const a = doc.querySelector('li').textContent;
console.log(a);