如何用JavaScript突出顯示小寫字母？

Question

對於這樣

<p> This is an exaMPLe </p> 

如何突出與使用Javascript不同顏色的小寫字母一個段落？

Answer 1

這是一個快速和骯髒的解決方案，使用正則表達式查找/替換。

var p = document.querySelector("p"); 
var html = p.innerHTML; 

html = html.replace(/([a-z]+)/g, "<strong>$1</strong>"); 

p.innerHTML = html; 

首先，您會看到段落，閱讀它的內部HTML。然後使用正則表達式來查找小寫字母a-z字母並用strong HTML標記包裝它們。如果您願意，您也可以使用span並應用CSS類。在正則表達式查找/替換後，請將HTML值重新設置。

工作例如：http://jsbin.com/vodevutage/1/edit?html,js,console,output

編輯： 如果你希望有不同的顏色，然後換一條線，如下所示：

html = html.replace(/([a-z]+)/g, "<span class='highlight'>$1</span>"); 

，並定義CSS類，如下所示：

.highlight { 
    background-color: yellow; 
}