JavaScript : 去掉 HTML 原始碼中的程式部份

 我 Blogger 中的文章清單是讓它取每一篇文章的前 140 個字當摘要顯示，之前偷懶，沒有將 JavaScript 的程式碼去掉，摘要就被程式碼佔掉了不少字數。原來大部份的文章是沒有什麼影響，因為帶有程式碼區塊都是放文末居多，但這一次將程式碼放在最前面，可就慘了。為了解決這個問題，只好重新再調整樣版的程序，多一道將 JavaScript 程式碼去掉的步驟。

去掉 JavaScript 當然是要使用正規語法來搜尋最快，大概是這樣：

htmlString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')

將正規語法拆解，筆記一下重點：

• /<script\b 可以找到 <script (沒有大於符號)。
• [^<]* 找到任何除了小於符號 < 以外的字元。
• (?:(?!<\/script>)<[^<]*)*   找到任何字元，一直到發現 </script> 為止。
• <\/script>/ : 找到 </script> tag.
• /gi : 使用 g 的旗標，找到所有符合條件者；使用 i 的旗標，不分大小寫。

如果還要去掉其它所有 HTML tag 的部份，就再做一次這個規則的：

htmlString.replace(/<[^>]+>/g, '')

用這個語法找到小於符號 < 開頭，直到大於符號才停止的字串。

將去掉 JavaScript 程式碼、去掉其它 tag 和去掉換行字元及跳格字元 (\n|\r|\t) ，全部合在一起，變成：

htmlString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '').replace(/<[^>]+>/g, '').replace(/\n|\r|\t/g, '')

哈！看似完美，我搞了個大烏龍。上面的語法是用來去掉 HTML 原始碼的，但是我原來抓文章內容是用：

post.textContent

用 textContent 就不會有 HTML tag 啊！結果當然沒有如預期去掉想刪除的部份。所以必須改為使用：

post.innerHTML

重新設定為處理過的內容也是必須使用 innerHTML。

另外，因為是放在 Blogger 的樣版中的 JavaScript ，所以特殊符號(像大於、小於、引號... )也必須先編碼過，不過會出現 XML 解析的錯誤訊息。

最後用的是：

<script type='text/javascript'>var post=document.getElementById(&quot;p<data:post.id/>&quot;), summary=post.innerHTML.replace(/&lt;script\b[^&lt;]*(?:(?!&lt;\/script&gt;)&lt;[^&lt;]*)*&lt;\/script&gt;/gi, &#39;&#39;).replace(/&lt;[^&gt;]+&gt;/g, &#39;&#39;).replace(/\n|\r|\t| /g, &#39;&#39;).substr(0,140); post.innerHTML=summary+&quot;......&quot;; </script>

有一些「眉眉角角」還是得記錄下來，太久沒用，忘得差不多了。