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>";
});

跨越与字符串匹配的字符

2 个答案: