Регулярное выражение для получения содержимого свойства html, когда другое определенное свойство не существует

Question

Я изо всех сил пытаюсь найти решение для того, что, вероятно, довольно просто, и, несмотря на то, что я ползаю много вопросов, мне не удается заставить его работать.

Вот 2 элемента HTML:

<a href="#content1" class="buttonDelete" style="color:white">Test1</a>
<a href="#content2" onclick="confirmDelete('test');" class="buttonDelete" style="color:white">Test2</a>

Я хочу получить ТОЛЬКО содержимое свойства 1-го элемента href (# content1). Он должен совпадать, потому что элемент html не содержит свойства "onclick".

Это регулярное выражение работает только для соответствия 1-му элементу:

^<a href="#"((?!onclick).)*$

, но я не могу понять, как получитьСодержание HREF. Я пробовал это:

^<a href="#(.*)"((?!onclick).)*$

но в этом случае оба элемента совпадают.

Спасибо за вашу помощь!

Answer 1

Regex не предназначен для этого. JavaScript будет работать лучше. Этот код будет хранить массив href s, соответствующих вашим требованиям, в переменной hrefArray.

var hrefArray = [];
for (var elem of document.getElementsByTagName('a')) {
  if (elem.onclick) hrefArray.push(elem.href)
}

Пример с вашим HTML приведен во фрагменте ниже:

var hrefArray = [];
for (var elem of document.getElementsByTagName('a')) {
  if (elem.onclick) hrefArray.push(elem.href)
}

console.log(hrefArray);

body {
  background-color: gray;
}

<a href="#content1" class="buttonDelete" style="color:white">Test1</a>
<a href="#content2" onclick="confirmDelete('test');" class="buttonDelete" style="color:white">Test2</a>

Answer 2

Я настоятельно рекомендую вам сделать это в два этапа. Во-первых, разбор произвольного html с помощью регулярного выражения является общеизвестно скользкой и извилистой дорогой. Для другого: нет никакого достижения в выполнении всего с одним неразборчивым регулярным выражением.

И это еще не все: «не содержит» атрибута «onclick» « - это не то же самое , что и« за атрибутом href непосредственно не следует атрибут onclick ». Таким образом, решение с одним регулярным выражением будет либо очень сложным, либо очень хрупким (теги html имеют произвольный порядок атрибутов).

var a = [
    '<a href="#content1" class="buttonDelete" style="color:white">Test1</a>',
    '<a href="#content2" onclick="confirmDelete(\'test\');" class="buttonDelete" style="color:white">Test2</a>'
];

console.log(
    a.filter(i => i.match(/onclick/i) == null)
     .map(i => i.match(/href="([^"]+)"/i)[1]
)

Это предполагает, что значения атрибутов href являются действительными и не содержат кавычек (чтоэто, конечно, технически возможно).