javascript - 突出显示 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，add”，则代码复制的输出为

<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>"); 

产生如下结果

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