高亮显示文本在Div标签

可以说我有这样一个div：高亮显示文本在Div标签

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

是否有可能有CSS和JS突出基于搜索查询该字符串的一部分？

就像我在寻找Stri这个词，它会突出显示那个部分？

来源

2012-02-09 Novazero

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

来源

2012-02-09 18:55:45

嗯我怎么会通过将字符串内的所有内容转换为其字符表示？ – Novazero 2012-02-09 19:17:30

你使用原始的JavaScript或JavaScript与库像jQuery？ – 2012-02-09 19:18:35

我可以在我的页面上执行这两个操作 – Novazero 2012-02-09 19:21:25

尝试jquery.highlight插件。

使含在其中要突出一些文字DIV jQuery选择：

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

然后运行字（一个或多个）高亮插件，你要强调

$div.highlight('Stri');

而且您应该在CSS中突出显示“高亮”类，因为这是高亮显示的文本类型：

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

来源

2012-02-09 18:59:54 Hubro

我忘记解决的问题是如何我去突出显示一个像“ string”这样的html的字符串，我想突出显示“ str”部分。 – Novazero 2012-02-09 19:04:45

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

来源

2012-02-09 19:09:16 rajesh

高亮显示文本在Div标签

回答

相关问题