每次都記不太住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, 謝謝指正,你沒說錯,&lt;在RegExp中不需要Escape,已修正本文。

Post a comment