Почему в данном примере не работает регулярное выражение?

Question

[Muranx]

Здравствуйте !

Подскажите что в данном случае получится в результате выполнения данного кода ?
console.log( this ) ;
шучу . . .

Задача следующая. . . У меня есть несколько div блоков , в которых с помощью regExp мне нужно заменить кое - что на кое - что , собственно всё почти получилось , однако по неведомой мне причине , некоторые регулярки абсолютно не работают , точнее регулярки чуть более сложные чем обычные слова заключенные в /. . ./. . .

<div class="any">function agg(){return true}</div><br>
<div class="any">function yt(x){return x.toUpperCase()}</div><br>
<div class="any">function (t, y, z){return "hello"}</div><br>
<div class="any">function hello(n){return Math.sqrt(n)}</div><br>
<div class="any">function h32(){console.log(false)}</div><br>

let test = document.querySelectorAll('.any');

let regCon = {
  '/function/' : '<span style="color: red">',
  '/return/' : '<span style="color: orange">',
  '/console(?=\.)/' : '<span style="color: purple">',
  // '/(?<=function\s)\w+(?=\()/' : '<span style="color: blue">', // ВОТ ЭТА СТРОКА
};

for(let k=0; k<test.length; k++){
    for(let o in regCon){
        test[k].innerHTML = test[k].innerHTML.replace(new RegExp(eval(o), 'gim'), m => regCon[o]+m+'</span>');
    };
};

Т . е . если разкоментить строчку ВОТ ЭТА СТРОКА , то скрипт не работает корректно , ХОТЯ в том-же regExp101.com данная ' регулярка ' абсолютно корректно работает ! Прошу вашей помощи в объяснении этого случая ! Ну и если вдруг , ответ будет настолько простым , что придётся просто заменить какой-нибудь индекс в цикле , или поставить где-нибудь лишнюю запятую , если вам будет не сложно , скажите пару слов по поводу реализации , я имею ввиду сам принцип , что есть объект у которого ключ это регулярка , а значение , это то , НА что мы будем заменять , ну и разумеется работа с циклом , в общем ваше компетентное ( i hope ) мнение ! Спасибо !

Answer 1

[Сергей Соколов]

Если открыть консоль бразуера, там появится ошибка из-за закоменнченной строки: "invalid regexp group"
По крайней мере, у меня в FireFox.
Потому, что FireFox не поддерживает такой изыск регулярок как look-behind (?<= ). IE, Safari – тоже.

И хорошо бы убрать eval() и слеши в ключах regCon:

'function' : '<span style="color: red">',
// ...
new RegExp(o, 'gim')

Comments

[Muranx]

Сергей Соколов, привет, спасибо за ответ! от эвала избавился, но тем не мене задача не решена, как мне сделать так, чтобы этот "изыск" все таки был, либо как его обойти, мне нужно именно проверить что перед \w+(?=\() идёт слово function + пробел, ведь если убрать это условие (?<=function\s) то тогда Math.pow( ) тоже будет попадать в мэтч, а мне нужно ислючительно название функции?

[Сергей Соколов]

Muranx, брать парочку function имя и менять её целиком на function <span>имя</span>

И, возможно, лучше передвинуть это правило в начало.

[Muranx]

Сергей Соколов, хм, окей , спасибо за помощь ! А почему вы все пишете всегда что eval использовать не рекомендуется, ниужели такая жутка штука? Часто приводит к исключениям?

[Сергей Соколов]

Muranx, eval() очень специфическая функция и чаще всего её использование не оправдано.
В этом вопросе её применение точно ни к чему. Да, так работает. Можно обернуть в ещё кучу лишних методов, чтобы всё ещё работало. Но это лишнее.

Answer 2

[Илья]

Очень вероятно проблемы с экранированием. Конструктор RegExp строку кушает, измените на строку и избавьтесь от eval.
https://developer.mozilla.org/ru/docs/Web/JavaScri...

Comments

[Muranx]

Илья, привет, спасибо за ответ! от эвала избавился, но тем не мене задача не решена, как мне сделать так, чтобы этот "изыск" все таки был, либо как его обойти, мне нужно именно проверить что перед \w+(?=\() идёт слово function + пробел, ведь если убрать это условие (?<=function\s) то тогда Math.pow( ) тоже будет попадать в мэтч, а мне нужно ислючительно название функции?

[Илья]

Muranx, как вариант такая: function[ \t]+([^)]+?)\(

[Muranx]

Илья, хех, мне нужно лишь название функции, а ты мне function . . ., в принципи мне уже в комментарии выше предположили что просто нужно искать всё целиком ( т.е. и function и её имя ) а уже заменять на function + . . . но если честно я думал что можно будет более технично и более точечно действовать

[Илья]

Muranx, эээ дак в регулярной строке ты можешь указывать то что тебе нужно, а потом через regexp выбирать нужные переменные через m[1], m[2], m[3]. Причем в твоей регулярке тебя устраивается использование function , а в предложенной нет. ЧЕ?! Я бы на твоем месте почитал про регулярки и JS полезную литературу при таком раскладе ;)

[Muranx]

Илья, хм, чот ты меня запутал, (?<=function\s)\w+(?=\() вот в этом наоборот НЕ мэтчится функция ( т.к. я просто проверяю данной регуляркой чтобы это было именно название функции, если слева от неё стоит слово function ), мне нужо лишь её название, а в том , что ты мне дал function[ \t]+([^)]+?)\( кокраз мэтчится не нужная мне function , поэтому в том варианте который ты мне предложил, ЕСЛИ пользоваться только лишь единственным аргументом конструктора new regeExp( o, <b>m</b> => . . .) то получится что в твоём варианте придется прописывать `function <span>$ { m }</span>`, что явно дольше будет, поэтому я и уточнил, а возможно ли мой варик исправить без мэтченья лишнего, вроде слова function которое мне не упало! А про запоминающие группы m[ 0 ] , m [ 1 ]. . , это надо тогда код переписывать, пока ещё не знаю как, т.к. цикл то один на весь объект, на все итеррации, поэтому если у меня изначально один объект хз как с одним циклом ему впихнуть для каждого случая свои запоминающие группы, займусь завтра ( если время будет )

[Илья]

Muranx, (?:function[ \t]+)([^)]+?)\(

[Muranx]

Илья, не злись ! -_- я кстати не очень понимаю, что значит[ \t] это же вроде символ табуляции, типо ты проверяешь чтобы между function и буквами было 1+ символов табуляции? И я понимаю что вот это([^)]+?) это и есть название функции, НО я хоть убей не врублюсь, почему ^) ( которое на сколько мне известно обозначает ВСЁ КРОМЕ ")" ) может быть названием функции, в чем прикол, почему бы просто не заменить [^)]+? ну скажем на банальное [\w]+? ведь в этом варианте тоже работает? Если не сложно объясни, быть может ты для меня откроешь новые вещи в понимание регулярок! ;D Я твой ответ отметил как решение, и пролайкал твои комменты ! ;D

[Илья]

Muranx, не в лайках дело, и в моем ответе по факту нет решения, в комментах если только. [ \t] - табы или пробелы. ([^)]+?)\( - исключает ситуации когда в inline написано, чтобы следующие скобки не забрать. А вообще да, это лишнее усложнение \w+ отработает лучше.