Получить частичное имя класса и текст внутри div с помощью регулярных выражений - PullRequest
Новая
       7

Получить частичное имя класса и текст внутри div с помощью регулярных выражений

0 голосов
/ 01 июля 2018

Мне нужно получить два значения из этого 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.']

Любая помощь будет принята с благодарностью. Спасибо!

Ответы [ 3 ]

0 голосов
/ 01 июля 2018

Есть много способов сделать это. Я перечислил только три из них, чтобы увидеть все из них проверьте этот ответ

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. Использование Regex 

// you get this string by getting class-list of the div
var str= "toast toast-success",         
    substr= /-success$/;   // or /-error$/
string.match(expr);
0 голосов
/ 01 июля 2018

Вы можете использовать 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);
0 голосов
/ 01 июля 2018

Предпочтительным способом было бы использовать исходные строки и, с помощью 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));
...