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

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

2 个答案:

Here's a fiddle