MEMO-用Javascript RegExp將<x>置換成<span class="x">
3 | 7,902 |
每次都記不太住Javascript RegExp要怎麼做複雜的Replace(例如: 將比對相符的字串內容變成新置換文字的一部分,標題說的"將<x>換成<span class='x'>"就是典型案例),特別記錄一下供未來年老回憶之用。
我遇到的實際需求是想將Sharepoint查詢結果中的高亮註記<c1>, <c2>分別轉成<span class='hl1">, <span class="hl2">。
例如:
、<c2>晶圓</c2>雙雄... 有利<c1>台灣</c1>出口業加速復甦,而<c1>台灣</c1>程式魔人族群亦在持續擴大中,符合投顧的預期...
要轉成
、<span class='hl2'>晶圓</span>雙雄... 有利<span class='hl1'>台灣</span>出口業加速復甦,而<span class='hl1'>台灣</span>程式魔人族群亦在持續擴大中,符合投顧的預期...
程式說穿了不值一文錢,但也好歹讓我試了十來分鐘,不寫下來恐怕下回又得要再花十分鐘,所以有了這篇備忘文。
var s = "、\u003cc2\u003e晶圓\u003c/c2\u003e雙雄... 有利\u003cc1\u003e台灣\u003c/c1\u003e出口業加速復甦,而\u003cc1\u003e台灣\u003c/c1\u003e程式魔人族群亦在持續擴大中,符合投顧的預期...";
var regex = /<c(\d)>/g;
s = s.replace(regex, "<span class='hl$1'>");
regex = /<\/c\d>/g;
s = s.replace(regex, "</span>");
【後記】這是我目前唯一一個在一顆蕃茄(25min)內搞定的工作項目--研究如何用Javascript置換SPS搜尋結果的高亮CSS,然後拿剩下的10分鐘跟偷偷佔用的休息時間寫了這篇文章 XD
[2011-07-18更新] 原本程式中使用[<]特別處理,但實際上RegularExpression需要額外處理的特殊符號只有 the opening square bracket [, the backslash \, the caret ^, the dollar sign $, the period or dot ., the vertical bar or pipe symbol |, the question mark ?, the asterisk or star *, the plus sign +, the opening round bracket ( and the closing round bracket ). [參考來源] 原寫法實屬多餘,感謝frank指正。
Comments
# by drem
每次用到 regex都會想到賭神的哽:「拿出來是上集,放回去是下集…」
# by frank
你好想請教為何/[<]c(\d)>/g;加上中括號而不是直接的/<c(\d)>/g;?
# by Jeffrey
to frank, 謝謝指正,你沒說錯,<在RegExp中不需要Escape,已修正本文。