javascript - span 匹配字符串的字符

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，用于跨越匹配字符串的字符。我添加了一些 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>";
});