How to Convert String to Slug

在這個 SEO 當道的年代，簡單易懂的現代網址已經是基本常識了。根據 W3C 的網址規定，合法字元僅有 A – Z, a – z, 0 – 9, -, ., _, ~, :, /, ?, #, [, ], @, !, $, &, ‘, (, ), *, +, ,, ;  = ，而且橫線 ( – ) 之後都是有特別意義的保留字，所以過去常看到亂七八糟的亂碼網址，像是本文的標題不處理的話就變….

How%20to%40%20Convert%20String%20to%20Slug

雖然對電腦來說沒什麼差別，但是對人類來說卻是難以理解、難以記憶的無意義片段。

為了將亂七八糟的網址統一成電腦可讀，人類可讀，而且容易被搜尋引擎找到的型式，出現了 slug 這樣的慣例。Slug 的規則一般來說是先濾除非英、數字的字元，中文、日文都先 bye 了；接著全部文字轉為小寫；再將常見於歐洲語系的重音或連音字母換成對應的英文字母；再將空白、橫線、底線全部換成橫線 (dashes) 或底線 (underscores)，二選一，最後去掉可能出現在頭尾的橫線或底線。以本文的標題來說，slug 就是這樣：

how-to-convert-string-to-slug

以下分別提供 PHP 與 JavaScript 轉換 slug 的範例，這兩種寫法是參考了很多篇網路文章，再加上一些心得修改而成。

<?php
$origin_str = ' -++-- How  2009 áäâèéëêìíïîò  ANT  許功蓋中文   To Use PHP Regex?';

function slug($str){
    $str = trim(strtolower($str)); // 轉為小寫，去除頭尾空白
    $str = remove_accents($str); // 去除重音字母
    $str = preg_replace('/[^a-z0-9-]/', '-', $str); // 將英、數以外的字元轉換成橫線
    $str = preg_replace('/-+/', "-", $str); // 去除連續的橫線
    return trim($str, '-'); // 再次去除頭尾的橫線
}

function remove_accents($str){
 $search = explode(",","ç,æ,œ,á,é,í,ó,ú,à,è,ì,ò,ù,ä,ë,ï,ö,ü,ÿ,â,ê,î,ô,û,å,e,i,ø,u");
 $replace = explode(",","c,ae,oe,a,e,i,o,u,a,e,i,o,u,a,e,i,o,u,y,a,e,i,o,u,a,e,i,o,u");
 return str_replace($search, $replace, $str);
}

echo "<pre>".slug($origin_str)."</pre>";
?>
#output=> how-2009-aaaeeeeiiiio-ant-to-use-php-regex

JavaScript 的版本如下：

<div class="output"></div>
<script type="text/javascript">
function slug(str) {
    str = str.replace(/^\s+|\s+$/g, ''); // trim
    str = str.toLowerCase();

    // remove accents, swap ñ for n, etc
    var from = "àáäâèéëêìíïîòóöôùúüûñýÿç·/_,:;";
    var to   = "aaaaeeeeiiiioooouuuunyyc------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-') // collapse dashes
    .replace(/^-/g, '');

    return str;
}

// jQuery 的輸出
$('div.output').html(
    slug(' -++-- How  2009 áäâèéëêìíïîò  ANT  許功蓋中文   To Use PHP Regex?')
);
</script>

PHP 與 JavaScript 的輸出結果是一樣的，如下。

how-2009-aaaeeeeiiiio-ant-to-use-php-regex