0

Нужно написать регулярное выражение, которое бы находило слово: «Элемент» (слово может вообще любым быть, суть как раз в его поиске) среди следующего набора тэгов (Сверху и снизу еще и другой html код поэтому поставил троеточие):

...
<a href="main/url.html" class="word_state" data-pjax="">Элемент</a><span> - </span>
...

Еще есть такой момент, что в документе много ссылок , но нужны те у которых в адресе href есть “main”

Мои наработки: (?<="/main/.......(не знаю как поставить n колличество символов)>)(.*)(?=</a><span>) Есть еще проблема, что если есть еще ссылка с окончанием как у этой, то захватывает программа последнюю, а нужно эту

6
  • console.log( [...document.querySelectorAll('a[href^="main"]')].filter(e => /^\s*элемент\s*$/i.test(e.textContent) ) - чем не устроил?) Commented 18 авг. 2020 в 23:07
  • А если поиск идет из внешнего источника, например текст html хранится в переменной, а не в документе
    – Mikhail
    Commented 18 авг. 2020 в 23:11
  • let div = document.createElement("div"); div.innerHTML = html_строка_из_переменной;console.log( [...div.querySelectorAll(ляляля)] ) — если конечно источник доверенный, и не будет содержать вредоносного кода* Commented 18 авг. 2020 в 23:12
  • А еще такой момент, слово элемент может вообще другим быть, смысл в том, что бы узнать что за слово, как я понял из примера идет проверка на то, что слово является Элемент, но оно может быть другим
    – Mikhail
    Commented 18 авг. 2020 в 23:15
  • Потом попробовал ваш пример, мне console вернула пустой массив, вот мой код: let dat=<a href="main/url.html" class="word_state" data-pjax="">Элемент</a><span> - </span> let div = document.createElement("div"); div.innerHTML = dat; console.log( [div.querySelectorAll('a[href^="main"]')].filter(e => /^\s*Элемент\s*$/i.test(e.textContent)))
    – Mikhail
    Commented 18 авг. 2020 в 23:27

1 ответ 1

2

/<a[^>]*?\shref="[^"]*main.*?".*?>(.*?)<\/a>/ (Ой!)

>>> https://regex101.com/ может помочь с разбором регулярок.

[^>] — всё что угодно, кроме символа >
*? — ноль или много раз, до тех пор, пока не дойдет до
\shref=" href с обязательным \s пробелом перед ним, в котором встречается main
[^"] гарантирует, что main найдется менно внутри href, пока кавычка не закрыта.

let test = `
  + <a href="main/url.html" class="word_state" data-pjax="">111</a><span></span>  
  + <br><a href="/main/url.html">222</a><span></span>  
  - <br><a href="#" data-href="main">333</a><span></span>  
  - <br><a href="#">подвох href="main"</a><span></span>  
  - <br><a href="main/url.html" data-подвох="<a>Маловероятный подвох</a>">444</a>
`;

console.log( getLinkContents(test) );

function getLinkContents(str) {
  let reg = /<a[^>]*?\shref="[^"]*main.*?".*?>(.*?)<\/a>/;
  let g_reg = new RegExp(reg, "g");

  return ( str.match(g_reg) || [] ).map(a => a.match(reg)[1]);
  // Сначала находит все совпадения (флажок `g`)
  // Потом через map достает только нужный кусок: всё, что попалось внутри скобок (.*?)

  // Особенность логического оператора || 'ИЛИ':
  // Если match вернет null (в логическом контексте - false),
  // возьмется второй [] пустой массив, он и вернется: map с ним ничего не сделает.
}

Но при условии, что HTML-строка прилетает из доверенного источника, или вы предварительно поудаляли всякие <img onerror="Бесконечный цикл">, надежнее будет использовать готовые методы для чтения:

let test = `
  + <a href="main/url.html" class="word_state" data-pjax="">111</a><span></span>  
  + <br><a href="/main/url.html">222</a><span></span>  
  - <br><a href="#" data-href="main">333</a><span></span>  
  - <br><a href="#">подвох href="main"</a><span></span>  
  + <br><a href="main/url.html" data-подвох="<a>Маловероятный подвох</a>">444</a>
`;

console.log( getLinkContents(test) );

function getLinkContents(str) {
  let div = document.createElement("div");
  div.innerHTML = str;
  
  return [...div.querySelectorAll('a[href*="main"]')].map(a => a.textContent);
}

Где a[href*="main"] - комбинация CSS-селекторов

Но querySelectorAll возвращает коллекцию элементов. У него нет метода map().
А это ..."Spread" оператор: Добавляет все элементы в настоящий массив, у которого есть встроенный .map()

2
  • А можно как-то отдельно взять нулевой элемент из массива, ну просто получается все длинной строкой через map, например если захочу отдельно первый элемент или просто длину массива узнать
    – Mikhail
    Commented 18 авг. 2020 в 23:59
  • @Mikhail console.log( getLinkContents(test)[0] ); — первый, console.log( getLinkContents(test).length ); — длина, getLinkContents(test).slice(-1)[0] — последний) Commented 19 авг. 2020 в 0:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.