与字符串匹配的 span 字符

span characters that matches a string

本文关键字：字符 span 字符串 串匹配      更新时间：2023-09-26

您好，我正在尝试检查列表中的某些文本是否计算变量（模式）以及它是否确实围绕同一个单词进行包装。

.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>

杰奎里

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

一些更改：

  • 使用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>'));
    }
});

使用 :contains 然后是.html()的回调 

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