如何在脚本中获取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);