將CSS應用於一個單詞

Question

是否可以將CSS應用於檢測元素中某個單詞並以某種方式標記該單詞的方式？我知道我可以在HTML中添加<span style="...">word</span>或<span class="...">word</span>，但這不會自動檢測到該單詞。有什麼辦法可以完全在CSS中完成此操作嗎？任何幫助表示讚賞。

Answer 1

Theres沒有辦法在CSS中做到這一點。你可以用一個包裹版本替換單詞的所有實例和應用樣式，按您的例子http://jsfiddle.net/w9VbP/：

.theword 
{ 
    color:red; 
} 

Answer 2

你可以輕鬆地使用jQuery它

JS

var word = 'hello'; 
var replacement = '<span class="theword">' + word + '</span>'; 

var re = new RegExp(word, 'ig'); 

document.body.innerHTML = document.body.innerHTML.replace(re, replacement); 

CSS。我在var text中存儲body的html標記，並用<span class="change">sample1</span>替換sample，並放回body的更新html標記。顯然，您必須將此jQuery放在html的head部分，否則jQuery函數中的sample字符串也將被替換爲<span class="change">sample1</span>。

jQuery的功能

$('body').each(function() { 
    var text = $(this).html().replace(/sample/g,'<span class="change">sample1</span>'); 
    $(this).html(text); 
}); 

的CSS：

.change{ 
color:red; 
background:blue; 
} 

Working jsFiddle