在Div标签下突出显示文本

Question

可以说我有一个像这样的div：

<div id="test" class="sourcecode">
"Some String"
</div>

可以让CSS和JS根据搜索查询突出显示该字符串的一部分吗？

就像我在搜索Stri一词一样，它只会突出显示该部分？

Answer 1

您必须将文本分开，将突出显示的部分分成<span> 。 像这样。

<div id="test" class="sourcecode">
"Some <span style="background-color:yellow">Stri</span>ng"
</div>

如果有，要做代表HTML标签的字符：

<div id="test" class="sourcecode">
    &lt;html&gt;String&lt;/html&gt;
</div>

...您可以像以前一样突出显示：

<div id="test" class="sourcecode">
    <span style="background-color:yellow">&lt;html&gt;Stri</span>ng&lt;/html&gt;
</div>

Answer 2

尝试使用jquery.highlight插件。

创建一个jQuery选择器，其中包含要突出显示某些文本的div：

var $div = $('#test');

然后使用您要突出显示的单词运行突出显示插件

$div.highlight('Stri');

另外，您还应该在CSS中设置“突出显示”类的样式，因为该类是荧光笔会提供突出显示的文本的类：

.highlight
{
    background-color: yellow;
    outline: 1px solid black;
}

Answer 3

<div id="test" class="sourcecode">
"Some String"
</div>

在获得搜索结果后的javascript中。

<script>
  var test = $('test').innerHtml;
  var query= 'Str';
  var new_str = test.replace(query, '<font style="background:yellow;color:red;" >'+query+'</font>');
  $('test').innerHtml = new_str;
</script>