JQuery 将 div 添加到文本并稍后清除它

Question

我有一个 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>

如果用户输入“Apr”并点击搜索，我想像这样向两个匹配的 span 内容添加一个 div

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

稍后当用户点击清除搜索时，我也想删除这些。

使用 JQuery 执行此操作的最佳方法是什么？

Answer 1

由于您不想使用插件，您可以使用replace()：

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

请注意，将 div 嵌套在 span 中是无效的。此外，上面的示例区分大小写（即red 不会匹配单词Red）。

为了去除突出显示，您可以使用unwrap()，定位已添加的div.red：

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

Here's a fiddle

Answer 2

试试higlighting jQuery plugin

Plugin

js

var hightlight = $('#highlight'),
    txt = $('#txt');
$('#search').click(function () {
    hightlight.highlight(txt.val());
});
$('#clear').click(function () {
    hightlight.removeHighlight();
});

HTML

<div id="highlight"> <!--  Wrap your searching area in div-->
 <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>

</div>
<input type="text" id="txt" /> <!-- Searching textbox -->
<input type="button" id="search" value="serach" /> <!-- Search on button click-->
<input type="button" id="clear" value="clear" /> <!-- clear highlight on button click-->

CSS

.highlight {
    background-color: red
}

Fiddle Demo