高亮显示分区标记下的文本 - Highlighting Text Under Div Tag

Highlighting Text Under Div Tag

本文关键字：文本显示分区高亮 | 更新日期: 2023-09-27

假设我有一个这样的div：

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

有可能让css和js基于搜索查询来突出显示该字符串的一部分吗？

就像如果我在搜索Stri这个词，它会突出显示那个部分吗？

您必须分割文本，将突出显示的部分分隔为<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>

试试jquery.highlight插件。

制作一个jQuery选择器，其中包含要高亮显示某些文本的div：

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

然后用你想要突出显示的单词运行突出显示插件

$div.highlight('Stri');

此外，你应该在css中设置类的样式"highlight"，因为这是高亮显示的文本的类：

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

<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>