jQuery使用each->substr()擷取指定字元分割並套用html標籤做突顯色的方法-教學撰寫:徐嘉裕Neil hsu

css的first-letter選擇器可以讓第一個字元自訂樣式，也就是第一個字能變顏色變大變小都行，但問題來了，如果客戶希望第二個字元或第三個字元都能套用特別的顏色，first-letter方法就不可行了，還是要靠js來處理才行。

例如要做一個像下圖這樣的效果，新聞標題的前2個字元為紅色，其他字元為黑色。

code如下：

html結構部分

<div id='titlebox'><a  class='exchangeArr'  href="https://www.blogger.com/">標題文字標題文字標題文字標題文字標題文字標題文字</a></div>

在標題<a>標籤加上class='exchangeArr'

js-code部分

在樣板底端加上以下code

<script>
$(".exchangeArr").each(function(index) {
var $exchangetext = 2; //由0開始到擷取位置字元數
//擷取指定字元
var $substrbefore=$(this).html().substr(0,$exchangetext);
//擷取剩餘字元
var $substrRear=$(this).html().substr($exchangetext);
//輸出
$(this).html('<span id="textcolor">'+$substrbefore+'</span>'+$substrRear+'');
});
</script>

綠色的<span>標籤跟id="textcolor就是指定第2個字元切割後套用上去的，在跟剩餘字元組合輸出的結果。

最後就是給id="textcolor定義一個css顏色樣式

#textcolor{
color: #ff1b1b;
}

這樣就完成了，可以修改要擷取的字元數套用樣式，有需要的朋友參考看看!

工作心的撰寫：徐嘉裕 Neil hsu