Question

我收到了这段代码： Link

我可以通过这个js突出显示静态文本的字符：

$("li:contains('Content1')").each(function(){
    var content = "Content1";
    this.innerHTML = this.innerHTML.replace(content,"<span>"+content+"</span>")
})

Content1动态值：$("#main").val()

问题：如何突出显示:contains中的字词以及输入框中的值

Answer 1

这会有点冒险，但是check this out。

您的问题是，当您调整内容时，您将无法再查看原始内容的内容。最好的方法是，在开始时，将原始LI文本存储在数据属性中，然后使用它进行操作。

 $("li").each(function() {
   $(this).attr( 'data-original', $(this).text() );
   $(this).attr( 'data-original-l', $(this).text().toLowerCase() );
 });

然后我们需要调整你的选择器来检查这个属性（而不是文本值）：

 $("li[data-original *= \"" + $("#main").val().toLowerCase() + "\"]")

，例如将搜索li [data-original * =“Harry Potter”]，这是“任何具有属性的LI”数据原始“，其中包含”Harry Potter“（see here）。

从那里，我们只需要按如下方式调整您的替换声明：

 $(this).html($(this).data('original').replace(new RegExp(content, "i"), "<span class='highlight'>$&</span>"));

我们正在做同样的事情，但现在使用$（this）.data（'original'）值而不是$（this）.val（）。我们还使用正则表达式，以便我们可以替换不区分大小写。另外，我们用$&替换，其中包含原始字符串中RegExp测试的匹配。

很容易就像馅饼！希望这对你有用，如果遇到任何障碍，请告诉我。

jQuery突出显示找到的字符：包含输入框中的文本

1 个答案: