javascript - 使用正则表达式获取 div 中的部分类名称和文本

Question

我需要从此 HTML 中获取两个值，这两个值要么是来自 toast-* 的错误，要么是成功，并且还要获取 toast-message 中的值:

<div class="toast toast-error" style="">
    <div class="toast-message">You have failed.</div> 
</div>
<div class="toast toast-success" style="">
    <div class="toast-message">You have succeed. 
</div>

div 元素一次仅显示一次，这可能是错误或成功。

有什么方法可以使用正则表达式，这样我就可以提取数组中的值，以便它:

['success', 'You have succeed.']

或

['error', 'You have failed.']

任何帮助将不胜感激。谢谢!

Answer 1

您可以使用 DOMParser和 querySelector选择元素。

let parser = new DOMParser();
let html = `<div class="toast toast-error" style=""><div class="toast-message">You have failed.</div></div>`;
let doc = parser.parseFromString(html, "text/html");
let div = doc.querySelector("div.toast");
let successOrFailure = div.getAttribute('class')
  .split(" ")
  .filter(word => word.substring(0, 6) === "toast-")[0]
  .substring(6);
let message = div.firstChild.innerHTML;
let result = [successOrFailure, message];
console.log(result);