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

我需要从这个HTML中获取两个值，这是来自

toast-*

的错误或成功，还需要获取

toast消息中的值：

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

或

任何帮助都将不胜感激。谢谢
 首选方法是使用源字符串，并在DOM的帮助下测试元素是否存在：


const html1=`
你失败了。
`;
常量html2=`
你成功了。
`;
/**
*返回错误toast消息的文本。
*
*@returns{string | null}toast消息，如果elemenet不存在，则返回null。
*/
函数getErrorToastText（字符串）{
const container=document.createElement（'div'）；
container.innerHTML=字符串；
const toast=container.querySelector（'.toast error.toast message'）；
返回toast？toast.innerHTML:null；
}
/**
*返回成功toast消息的文本。
*
*@returns{string | null}toast消息，如果elemenet不存在，则返回null。
*/
函数getSuccessToastText（字符串）{
const container=document.createElement（'div'）；
container.innerHTML=字符串；
const toast=container.querySelector（'.toast success.toast message'）；
返回toast？toast.innerHTML:null；
}
console.log（'when.error toast元素存在：'，getErrorToast文本（html1））；
console.log（'when.error toast元素不存在：'，getErrorToast文本（html2））；
log（'when.success toast元素存在：'，getSuccessToast文本（html2））；
console.log（'when.success toast元素不存在：'，getSuccessToast文本（html1））首选方法是使用源字符串，并在DOM的帮助下测试元素是否存在：


const html1=`
你失败了。
`;
常量html2=`
你成功了。
`;
/**
*返回错误toast消息的文本。
*
*@returns{string | null}toast消息，如果elemenet不存在，则返回null。
*/
函数getErrorToastText（字符串）{
const container=document.createElement（'div'）；
container.innerHTML=字符串；
const toast=container.querySelector（'.toast error.toast message'）；
返回toast？toast.innerHTML:null；
}
/**
*返回成功toast消息的文本。
*
*@returns{string | null}toast消息，如果elemenet不存在，则返回null。
*/
函数getSuccessToastText（字符串）{
const container=document.createElement（'div'）；
container.innerHTML=字符串；
const toast=container.querySelector（'.toast success.toast message'）；
返回toast？toast.innerHTML:null；
}
console.log（'when.error toast元素存在：'，getErrorToast文本（html1））；
console.log（'when.error toast元素不存在：'，getErrorToast文本（html2））；
log（'when.success toast元素存在：'，getSuccessToast文本（html2））；
console.log（'when.success toast元素不存在：'，getSuccessToast文本（html1））有很多方法可以做到这一点。我只列出了其中的三个，以查看所有这些

1。使用（ES6）JS函数
包括

var str = "toast toast-success",
    substr = "success";
str.includes(substr);

var str = "toast toast-success",
    substr = "success";
if(str.indexOf(substr) == 1){
    // the current div is a success
    // do your logic
}

2。使用
indexOf

var str = "toast toast-success",
    substr = "success";
str.includes(substr);

var str = "toast toast-success",
    substr = "success";
if(str.indexOf(substr) == 1){
    // the current div is a success
    // do your logic
}

3。使用正则表达式

// you get this string by getting class-list of the div
var str= "toast toast-success",         
    substr= /-success$/;   // or /-error$/
string.match(expr);

有很多方法可以做到这一点。我只列出了其中的三个，以查看所有这些

1。使用（ES6）JS函数
包括

var str = "toast toast-success",
    substr = "success";
str.includes(substr);

var str = "toast toast-success",
    substr = "success";
if(str.indexOf(substr) == 1){
    // the current div is a success
    // do your logic
}

2。使用
indexOf

var str = "toast toast-success",
    substr = "success";
str.includes(substr);

var str = "toast toast-success",
    substr = "success";
if(str.indexOf(substr) == 1){
    // the current div is a success
    // do your logic
}

3。使用正则表达式

// you get this string by getting class-list of the div
var str= "toast toast-success",         
    substr= /-success$/;   // or /-error$/
string.match(expr);

您可以使用和来选择元素


let parser=new DOMParser（）；
让html=`你失败了。`；
让doc=parser.parseFromString（html，“text/html”）；
设div=doc.querySelector（“div.toast”）；
让successOrFailure=div.getAttribute（'class'）
.拆分（“”）
.filter（word=>word.substring（0,6）==“toast-”[0]
.子串（6）；
让message=div.firstChild.innerHTML；
let result=[successOrFailure，message]；
控制台日志（结果）您可以使用和来选择元素


let parser=new DOMParser（）；
让html=`你失败了。`；
让doc=parser.parseFromString（html，“text/html”）；
设div=doc.querySelector（“div.toast”）；
让successOrFailure=div.getAttribute（'class'）
.拆分（“”）
.filter（word=>word.substring（0,6）==“toast-”[0]
.子串（6）；
让message=div.firstChild.innerHTML；
let result=[successOrFailure，message]；
控制台日志（结果）为什么要在此处使用正则表达式？您有对元素的引用吗？@CertainPerformance，因为该div是字符串格式的，而不是原始htmlfile@bakaio您是否无法将字符串解析为HTML？在StackOverflow上每天出现1000次“如何用正则表达式解析HTML”的问题时，我将发布一条强制性的消息：解析HTML的“正确”方法是使用HTML解析器。不是正则表达式。例如，使用。您使用正则表达式是否有充分的理由？如果您控制HTML的生成，并且能够保证每次生成的HTML都是完全相同的格式——相同的属性顺序、相同的空格、节点结构没有变化等等——那么您就可以在正则表达式中这样做。当然，如果您能保证这一点，那么您可能不需要正则表达式，因为您可以从生成HTML的任何上游进程提取数据？您有对元素的引用吗？@CertainPerformance，因为该div是字符串格式的，而不是原始htmlfile@bakaio您是否无法将字符串解析为HTML？在StackOverflow上每天出现1000次“如何用正则表达式解析HTML”的问题时，我将发布一条强制性的消息：解析HTML的“正确”方法是使用HTML解析器。不是正则表达式。例如，使用。使用正则表达式是否有充分的理由？如果您控制HTML生成，并且可以保证每次都使用完全相同的格式--相同的属性顺序，