在Li中突出显示搜索文字，

Question

当我使用,在搜索输入然后,和逗号后的文字是没有得到选择。 这是因为我正在使用.split方法。 我有以下格式的数据。 我必须在强标签中显示第一行。 这样我就可以使用,分隔符将其拆分出来。

<li><strong>my name is amit</strong>, address</li>
<li><strong>my name is geeta</strong>, address</li>
<li><strong>my name is xyz</strong>, address</li>


$(this).html(function(val,html){                    
return "<strong>"+txt.split(',')[0]+"</strong>," + txt.split(',')[1]
});

我的.replace方法工作正常。 下面的代码给价值，像

txt = txt.replace(nn, "<span class='highlight'>" + '$1' + "</span>"); 

如果键入“我的名字是amit，添加”，则代码复制的输出为

<span class='highlight'>My name is amit, add</span>ress

我知道问题所在，但如何解决。

小提琴

Answer 1

这似乎是一个带有跨度的怪癖，.html（）将闭合跨度标签移到了封闭的强标签内，因为它是在强标签内打开的。

如果将其更改为在display：inline-block中使用div，如本jsfiddle所示 ，它将起作用。

txt = txt.replace(nn, "<div class='highlight'>" + '$1' + "</div>"); 

产生类似的结果

“，”之后的文本不是粗体，而是所有匹配的文本都突出显示。

Answer 2

我按照@Alexander Ravikovich的建议再次将其分开，它最终对我有用。 这是小提琴

 if ($('.highlight', this).text().indexOf(',') != -1) {
    var x = $('.highlight', this).text().split(',');
    $(this).html("<strong><span class='highlight'>" + x[0] + "</span></strong><span class='highlight'>," + x[1] + "</span>" + $.trim($(this).text()).substr(val.length, $.trim($(this)).length))
} else {
    $(this).html(function() {
        return "<strong>" + txt.split(',')[0] + "</strong>," + txt.split(',')[1];
    });
}

 $('.inp').keyup(function(){ var val=this.value $('ul li').each(function(){ var e = '(^| )' + val; var l = $(this).text() var a = new RegExp(e, "i"); if(!a.test(l)){ $(this).hide(); } else{ $(this).show(); var reg = new RegExp('\\\\b(' + val + ')', 'gi'), txt = $(this).text(); if (val.replace(/\\s/g, '') == '') { txt = txt.replace(new RegExp("<span class='highlight'>([\\s\\S]*?)</span>"),'$1'); $(this).html(function(){ return "<strong>"+txt.split(',')[0]+"</strong>,"+ txt.split(',')[1] }); } else{ txt = txt.replace(reg, "<span class='highlight'>" + '$1' + "</span>"); $(this).html(txt); if($('.highlight',this).text().indexOf(',')!=-1){ var x=$('.highlight',this).text().split(','); $(this).html("<strong><span class='highlight'>"+x[0]+"</span></strong><span class='highlight'>,"+x[1]+"</span>"+$.trim($(this).text()).substr(val.length,$.trim($(this)).length)) } else{ $(this).html(function(){ return "<strong>"+txt.split(',')[0]+"</strong>," + txt.split(',')[1]; }); } } } }) }) 

 .highlight{color:#ff0000} input{width:300px} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input class="inp" /> <ul> <li><strong>my name is amit</strong>, address</li> <li><strong>my name is geeta</strong>, address</li> <li><strong>my name is xyz</strong>, address</li> </ul>