1

Всем привет!

Почему-то не могу запустить следующую регулярку на js:

    this.getText = function(){
      var reg = /(?<=.menu{)[^}]*$/
      let text1 = document.getElementById("css-mnu").innerText.search(reg);
      if (text1 == -1) return NaN;
      console.log(text1);
      let spl = text1.split(';');
      return spl;
    }

Сам текст:

  .header{
    min-height: 25px;        
  }
  .header *{
    width: 100%;
  }
  .menu{
    display: inline-flex;        
    flex-direction: rows;
    justify-content: space-around;        
  }
  .menu > *{
    border: 1px solid;            
    text-align: center;
  }
  .menu > *{
    border: 1px solid;            
    text-align: center;
  }      
  .menu *:last-child{
    display: none;
  }

Сама регулярка - рабочая. Проверял в notepad++, находит без проблем. При этом если саму регулярку упростить скажем до .menu, то тоже работает.

var func = function(){

          var reg = /(?<=\.menu\{)[^\}]*$/
          let text1 = document.getElementById("css-mnu").innerText.search(reg);
          if (text1 == -1) 
            {
              document.write(text1);                         return NaN;
            }
          document.write(text1);
          let spl = text1.split(';');
          return spl;
        }
        
    <div style="border:1px solid;cursor:pointer" onclick=func() id="css-mnu">
      /*все элементы меню имеют толщину 100%*/
      .header{
        min-height: 25px;        
      }
      .header *{
        width: 100%;
      }
      .menu{
        display: inline-flex;        
        flex-direction: rows;
        justify-content: space-around;        
      }
      .menu > *{
        border: 1px solid;            
        text-align: center;
      }
      .menu > *{
        border: 1px solid;            
        text-align: center;
      }      
      .menu *:last-child{
        display: none;
      }
      </div>

В чем может быть проблема с полной версией /(?<=.menu{)[^}]*$/ ?

Заранее спасибо

6
  • lookbehind пока не работает в js
    – ThisMan
    26 дек 2018 в 11:44
  • Вы ищите элемент с ID css-mnu - возможно тут опечатка должно быть css-menu 26 дек 2018 в 11:45
  • @ThisMan, работает, но не везде.
    – Grundy
    26 дек 2018 в 11:47
  • 2
    Используйте захватывающие подмаски. document.getElementById("css-mnu").innerText.match(/\.menu{([^}]*)/)[1] 26 дек 2018 в 11:48
  • innerText лучше не использовать.
    – Qwertiy
    26 дек 2018 в 14:46

1 ответ 1

2

Используйте захватывающие подмаски, поддержка блоков предварительного просмотра назад ((?<=...)) появилась только в ECMAScript 2018:

var m = document.getElementById("css-mnu").innerText.match(/\.menu{([^}]*)/);
if (m) {
    return m[1].split(';');
} // else  ...

Демо:

var str = " .header{\n    min-height: 25px;        \n  }\n  .header *{\n    width: 100%;\n  }\n  .menu{\n    display: inline-flex;        \n    flex-direction: rows;\n    justify-content: space-around;        \n  }\n  .menu > *{\n    border: 1px solid;            \n    text-align: center;\n  }\n  .menu > *{\n    border: 1px solid;            \n    text-align: center;\n  }      \n  .menu *:last-child{\n    display: none;\n  }";
var m = str.match(/\.menu{([^}]*)/);
if (m) {
  console.log(m[1].trim().split(/\s*;\s*/).filter(Boolean));
}

Подробности

  • \. - символ . (должен быть экранирован, чтобы находить только символ .)
  • menu{ - нахожит menu{
  • ([^}]*) - Захватывающая подмаска (группа), которая находит 0 и более символов, отличных от } ([^}] — это исключающий символьный класс) и помещает найденное значение в отдельный буфер памяти (m[1]).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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