在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

我知道问题但是如何解决它。

fiddle

Answer 1

似乎是一个带有span的怪癖，.html（）将结束的span标记移动到结束的强标记内，因为它是在强标记内打开的。

如果您将其更改为使用带有display：inline-block的div，如 this jsfiddle 中所示，则可以正常工作。

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

产生类似

的结果

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

Answer 2

我再次将它拆分为@Alexander Ravikovich建议并最终为我工作。这是fiddle

 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>