Неожиданный вывод .match () и регулярных выражений

Question

Я использую match() и regex для получения массива всех вхождений «Имя».Имя может быть любой строкой и является просто заполнителем для этого примера.

Как вы можете видеть в первых двух итерациях, я получаю ожидаемый результат.Однако третья итерация игнорирует первую \n, а также выводит предыдущую строку.

Есть идеи, почему это происходит?

$("#shortDescTextarea").on('keyup', function() {
  var currentVal = $(this).val();
  var allItemNames = currentVal.match(/\n[^:]+:/g);

  console.log(allItemNames);

});

textarea{height:250px;width:500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="shortDescTextarea" class="form-control">|H|Header|/H|
Name: Value
Name: Value
|H|Header|/H|
Name:
</textarea>

Answer 1

Вы не должны совпадать с \n, так как это не гарантировано (например, если Name:... окажется первой строкой вашего текста).Вместо этого используйте флаг m (многострочный), где ^ соответствует началу строки, как бы то ни было.Точно так же вы можете использовать ? модификатор "non-жадный", чтобы убедиться, что вы не пересекаете двоеточие, что упрощает использование ., который не соответствует символам новой строки, избегая необходимости явно защищать их,Окончательный результат:

/^.*?:/gm

Для захвата значения как до, так и после двоеточия:

let str = `
Name: Foo
Name: Bar
Header stuff I don't understand
Name: Quux
`;
let re = /^(.*?):\s*(.*)$/gm
results = [];
while (m = re.exec(str)) {
  results.push([m[1], m[2]]);
}
console.log(results);

Answer 2

Один из способов исправить это - добавить \n в скобках, например:

currentVal.match (/ \ n [^: \ n] +: / g);

Обратите внимание, что этот /\n[^:]+:/g будет захватывать все символы от \n до :, которые не включают : символ, поэтому будет захвачен этот шаблон \n|H|Header|/H|\nName:.

Пример:

$("#shortDescTextarea").on('keyup', function()
{
    var currentVal = $(this).val();
    var allItemNames = currentVal.match(/\n[^:\n]+:/g);
    console.log(allItemNames);
});

textarea{height:250px;width:500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="shortDescTextarea" class="form-control">|H|Header|/H|
Name: Value
Name: Value
|H|Header|/H|
Name:
</textarea>