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>

在Div标签下突出显示文本

3 个答案: