Позитивный и негативный просмотр в регулярках JavaScript

Иногда нужно решить задачу такого типа: найти строку 'aaa' и заменить ее на '!', но только если после 'aaa' стоит 'x', а сам 'x' при этом не заменять. Если мы попытаемся решить задачу 'в лоб', то у нас ничего не выйдет:

'aaax baaa'.replace(/aaax/g, '!'); // вернет '! baaa', а хотели '!x baaa'

Просмотр вперед

Для решения задачи нужен способ сказать, что 'x' не следует заменять. Делается это с помощью специальных скобок (?= ), которые просто смотрят, но не забирают с собой.

Эти скобки называются позитивный просмотр вперед. Позитивный - так как 'x' (в нашем случае) должен быть - только тогда произойдет замена.

Давайте применим эти скобки для решения нашей задачи:

'aaax aaab'.replace(/aaa(?=x)/g, '!'); // вернет '!x aaab'

Есть и негативный просмотр вперед - (?! ) - он, наоборот, говорит, что чего-то должно не быть. В следующем примере, замена произойдет, только если после 'aaa' стоит НЕ 'x':

'aaax aaab'.replace(/aaa(?!x)/g, '!'); // вернет 'aaax !b'

Просмотр назад

Аналогичным образом есть позитивный просмотр назад - (?<= ). В следующем примере замена произойдет, только если перед 'aaa' стоит 'x':

'xaaa'.replace(/(?<=x)aaa/g, '!'); // вернет 'x!'

И есть также негативный просмотр назад - (?<! ). В следующем примере замена произойдет, только если перед 'aaa' не стоит 'x':

'baaa'.replace(/(?<!x)aaa/g, '!'); // вернет 'b!'

Практические задачи

Дана строка, содержащая имена функций:

let str = 'func1() func2() func3()';

Получите массив имен функций из строки.

Дана строка с тегом:

let str = '<a href="" class="eee" id="zzz">';

Получите массив имен атрибутов этого тега.

Дана строка с переменными:

let str = '$aaa $bbb $ccc xxxx';

Получите подстроки, перед которыми стоит символ доллара.