使用正则表达式在 div 中获取部分 class 名称和文本

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

首选方法是使用源字符串，在 DOM 的帮助下，测试元素是否存在：

const html1 = `
  <div class="toast toast-error" style="">
    <div class="toast-message">You have failed.</div>
  </div>  
`;

const html2 = `
  <div class="toast toast-success" style="">
    <div class="toast-message">You have succeed.</div>
  </div>
`;

/**
 * Returns the text of the error toast message.
 *
 * @returns {string|null} The toast message, or null if the elemenet is not present.
 */
function getErrorToastText(string) {
  const container = document.createElement('div');
  container.innerHTML = string;

  const toast = container.querySelector('.toast-error .toast-message');
  return toast ? toast.innerHTML : null;
}

/**
 * Returns the text of the success toast message.
 *
 * @returns {string|null} The toast message, or null if the elemenet is not present.
 */
function getSuccessToastText(string) {
  const container = document.createElement('div');
  container.innerHTML = string;

  const toast = container.querySelector('.toast-success .toast-message');
  return toast ? toast.innerHTML : null;
}


console.log('when .error-toast element present:', getErrorToastText(html1));
console.log('when .error-toast element not present:', getErrorToastText(html2));

console.log('when .success-toast element present:', getSuccessToastText(html2));
console.log('when .success-toast element not present:', getSuccessToastText(html1));

Answer 2

有很多方法可以做到。我只列出了其中的三个，大家看看check this answer

1.使用 (ES6) JS 函数 includes

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

2。使用 indexOf

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

Answer 3

您可以使用 DOMParser and querySelector 到 select 元素。

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

使用正则表达式在 div 中获取部分 class 名称和文本

Get partial class name and text inside div using regex

javascript

regex

dom

domparser