Question

我想要更改字符串中有限字符的背景颜色

我有文本框和字符串，我想从文本框中更改字符串的背景颜色
使用Jquery 例如：

当我在文本框中输入文本'char'时，我需要更改列出的所有'char'和'CHAR'文本ul

<ul class="brows_all_cat"> 

<li><a> My sample character1  </a></li>
<li><a> My sample CHARACTER2  </a></li>
<li><a> My sample character3  </a></li>
<li><a> My sample character4  </a></li>
</ul>

Answer 1

创建一个变量来存储输入的短语：

var word ='';
编写事件处理程序

$（document）.on（'keypress'，highlight）;

现在实现hightlight功能：

function highlight(event) {
    // ...
}

将按键添加到短语：

word += String.fromCharCode(event.which);

从所有<a>元素中提取innerText，然后通过使用<span>元素包装短语来添加hightlights

$('li>a').each(function() {
    var element = $(this);
    var text = element.text();
    text = text.replace(new RegExp('(' + word + ')', 'ig'), '<span class="highlight">$1</span>');
    element.html(text);
});

向.highlight选择器添加样式：

<style>
    span.highlight {
        color: red;
    }
</style>

通过组合所有代码，它应该如下所示：

var word = '';

function highlight(event) {
    word += String.fromCharCode(event.which);
    $('li>a').each(function() {
        var element = $(this);
        var text = element.text();
        text = text.replace(new RegExp('(' + word + ')', 'ig'), '<span class="highlight">$1</span>');
        element.html(text);
    });
}

$(document).on('keypress', 'highlight');

还有一个问题，在一段时间之后文章没有收到任何按键事件，或者是否还有其他策略时，该词会被清除？

Answer 2

我认为您的意思是.contains()选择器，尤其是making it case-INsensitive

//make :contains() case insensitive
jQuery.expr[':'].Contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

//then 

var elementsThatHaveText = $('.brows_all_cat a:contains("'+text_you_need+'")');

jQuery字符搜索

2 个答案: