在Li中，突出显示搜索文字， [英] Highlight search text after , in Li

问题描述

当我在搜索输入中使用,时，则不会选择,和逗号后的文本.这是因为我正在使用.split方法.我有以下格式的数据.我必须在强标签中显示第一行.因此我已经使用,分隔符将其拆分了.

When I use , in search input then , and text after comma is not getting selected. This is because I am using .split method. I have data in below format. I have to display first line in strong tag. so that I have split it out using , separator.

<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方法工作正常.以下代码给出了类似的值

My .replace method is working fine. The following code giving value like

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

如果我键入我的名字是阿米特，请添加"，则通过代码复制的输出为

if I type "My name is amit, add" then output reproduced by code is

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

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

I know the problem but how to fix it.

小提琴

推荐答案

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

I split out it again as @Alexander Ravikovich suggested and its finally work for me. here is 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>

这篇关于在Li中，突出显示搜索文字，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！