高亮显示文本在Div标签
问题描述:
可以说我有这样一个div:高亮显示文本在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">
<html>String</html>
</div>
...你可以突出显示的方式和以前一样:
<div id="test" class="sourcecode">
<span style="background-color:yellow"><html>Stri</span>ng</html>
</div>
答
尝试jquery.highlight插件。
使含在其中要突出一些文字DIV jQuery选择:
var $div = $('#test');
然后运行字(一个或多个)高亮插件,你要强调
$div.highlight('Stri');
而且您应该在CSS中突出显示“高亮”类,因为这是高亮显示的文本类型:
.highlight
{
background-color: yellow;
outline: 1px solid black;
}
+0
我忘记解决的问题是如何我去突出显示一个像“ 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>
嗯我怎么会通过将字符串内的所有内容转换为其字符表示? – Novazero 2012-02-09 19:17:30
你使用原始的JavaScript或JavaScript与库像jQuery? – 2012-02-09 19:18:35
我可以在我的页面上执行这两个操作 – Novazero 2012-02-09 19:21:25