Регулярное выражение для строки, которая не начинается и заканчивается последовательностью

Question

filter('highlight', function() { 
return function(data, search) { 
    if (data) { 
     data = data.toString(); 
     if (search) { 
      for(var i = 0; i < search.length; i++) { 
       data = data.replace(new RegExp("(" + preg_quote(search[i]) + ")" , 'gi'), "<span class='search-highlight'>$1</span>"); 
      } 
     } 
    } 
    return data; 
};}). 

мне нужно выделить данные, если оно содержит какой-либо элемент поиска. если данные «foo@bar.com» и поиск содержит «foo», функция вернет <span ..>foo</span>@bar.com.

Проблема в том, что массив поиска содержит «foo», «a», функция возвращает <sp<span ..>a</span>n ..>foo</span>@bar.com, что нарушает вид страницы.

Идея - мне нужно пропустить что-нибудь, что уже окружено тегом <span></span>. Как я могу это сделать?

Answer 1

Это классический пример того, почему вы не смешиваете HTML и Regex.

У вас есть DOM, используйте его!

Во-первых, используйте регулярное выражение, чтобы найти положение матча. Это можно сделать, позвонив по номеру regex.exec(string) и затем получив regex.lastIndex. Это говорит вам, где регулярное выражение выполнило поиск. Вызовите textNode.splitText(), используя это lastIndex, а затем минус длину матча. Это отделит согласованный текст от остальных. Затем вы можете обернуть это внутри элемента.

Повторите все текстовые узлы и все поисковые запросы.

Я оставлю для вас точный код, как упражнение, но это будет много, МНОГО более надежным.