JQuery将div添加到文本中，并在以后清除它

我有一个HTML页面，其中有一些用户可以搜索的内容。下面是示例HTML

 <span class="name">Red Apple</span>
 <span class="location">Texas</span>
 <span class="date">Mon, Apr 07, 11:15 AM</span>

 <span class="name">California Orange</span>
 <span class="location">California</span>
 <span class="date">Mon, Apr 07, 11:15 AM</span>

红苹果
得克萨斯州
4月7日星期一上午11:15
加州橙
加利福尼亚
4月7日星期一上午11:15

如果用户输入“Apr”并点击search，我想向两个匹配的span内容添加一个div，如下所示

<span class="date">Mon, <div class="red">Apr<div> 07, 11:15 AM</span>

4月7日星期一上午11:15

稍后当用户点击clear search时，我也想删除这些

使用JQuery的最佳方法是什么？

试试看

js

var hightlight=$（“#highlight”），
txt=$（“#txt”）；
$（“#搜索”）。单击（函数（）{
hightlight.highlight（txt.val（））；
});
$（'#清除'）。单击（函数（）{
hightlight.removeHighlight（）；
});

HTML

红苹果
得克萨斯州
4月7日星期一上午11:15
加州橙
加利福尼亚
4月7日星期一上午11:15

CSS

。突出显示{
背景颜色：红色
}

---

由于您不想使用插件，因此可以使用

replace（）

：

---

您可以使用addClass-removeClass实现这一点，请看这里--无需添加div，它必须匹配整个单词还是只匹配其中的一部分？这可能会有帮助（不确定，因为工作筛选器正在阻止站点）您的用户在哪里输入这些数据？必须匹配部分文本而不是整个文本。用户有一个搜索文本框，在其中输入搜索字符串。谢谢，但不能使用插件。必须使用JQuery或Javascript来完成。我更喜欢JQuery。如果它是用于个人项目，我会使用它，但在工作中我们不能使用其他JQuery插件。这很有效。非常感谢。我将div替换为span to，因为span中的div无效。

$('span').html(function() {
    return $(this).text().replace(searchString, '<div class="red">' + searchString + '</div>');
});

$('div.red').contents().unwrap();