在Li之后突出显示搜索文本

当我使用时,在搜索输入中，然后和逗号后的文本没有被选中。 这是因为我使用的是.split方法。 我有以下格式的数据。 我必须在强标签中显示第一行。 所以我用分隔符将它拆分出来。

 
my name is amit, address
 
my name is geeta, address
 
my name is xyz, address
 $(this).html(function(val,html){ return ""+txt.split(',')[0]+"," + txt.split(',')[1] }); 

我的.replace方法工作正常。 以下代码给出了类似的值

 txt = txt.replace(nn, "" + '$1' + ""); 

如果我输入“我的名字是amit，添加”然后输出的代码是

 My name is amit, address 

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

小提琴

Answer 1

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

如果你改变它以使用div与display：inline-block，就像在这个jsfiddle中看到的那样 ，它可以工作。

 txt = txt.replace(nn, "
" + '$1' + "
"); 

产生的结果就像

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

Answer 2

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

  if ($('.highlight', this).text().indexOf(',') != -1) { var x = $('.highlight', this).text().split(','); $(this).html("" + x[0] + "," + x[1] + "" + $.trim($(this).text()).substr(val.length, $.trim($(this)).length)) } else { $(this).html(function() { return "" + txt.split(',')[0] + "," + 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("([\s\S]*?)"),'$1'); $(this).html(function(){ return ""+txt.split(',')[0]+","+ txt.split(',')[1] }); } else{ txt = txt.replace(reg, "" + '$1' + ""); $(this).html(txt); if($('.highlight',this).text().indexOf(',')!=-1){ var x=$('.highlight',this).text().split(','); $(this).html(""+x[0]+","+x[1]+""+$.trim($(this).text()).substr(val.length,$.trim($(this)).length)) } else{ $(this).html(function(){ return ""+txt.split(',')[0]+"," + txt.split(',')[1]; }); } } } }) }) 

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

   
 
my name is amit, address
 
my name is geeta, address
 
my name is xyz, address