高亮顯示文本在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插件。

使含在其中要突出一些文字DIV jQuery選擇：

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>