символы диапазона, которые соответствуют строке

Question

Здравствуйте, я пытаюсь сделать проверку нечувствительности, если какой-либо текст в списке сопоставляет переменную (шаблон), и если она охватывает оболочку вокруг одного и того же слова.

HTML

<ul> 
    <li><a href="#">Lorem</a></li> 
    <li><a href="#">Ipsum</a></li> 
    <li><a href="#">Dolor</a></li> 
    <li><a href="#">Sit</a></li> 
    <li><a href="#">Amet</a></li> 
</ul> 

JQuery

var pattern = 'lor'; 
var filter = new RegExp(pattern, 'gi');//create regexp 
$('ul li').each(function() { 
    var spanResult = $(this).text().match(filter);//match html with filter 
    if ($(this).text().toLowerCase().indexOf(spanResult) >= 0) 
    { 
     $(this).text().replace(spanResult, '<span>'+spanResult+'</span>'); 
    } 
}); 

Answer 1

несколько изменений:

• Использование html вместо text
• if(spanResult) является более простым условием, если совпадение верно

Вот jsBin к span characters that match a string. Я добавил несколько CSS, чтобы изменить интервалы на красный, чтобы вы могли их видеть.

var pattern = 'lor'; 
var filter = new RegExp(pattern, 'gi');//create regexp 
$('li').each(function() { 
    var spanResult = $(this).text().match(filter);//match html with filter 
    if (spanResult) 
    { 
     $(this).html($(this).html().replace(spanResult, '<span>'+spanResult+'</span>')); 
    } 

}); 

Answer 2

Использование :contains, а затем обратного вызова из .html()

$("ul li:contains('" + pattern + "')").html(function() { 
    var text = $(this).html(); 
    return text.replace(pattern, "<span>" + pattern + "</span>"; 
});