jQuery/JS：SEOフレンドリーなリンクを作成するには

Question

テキスト入力ボックスに入力からSEOフレンドリーなリンクを作成しようとしています。私はカーソルが問題の入力を離れるときにぼかしイベントを行います。入力のテキストを（リンクの）目的の入力に表示させることができますが、リンクにハイフネーションが加えられておらず、特殊文字がハイフンに置き換えられません。グローバルな文字列置換を実行しようとしていますが、式では変数ではなく文字列が必要です。少なくとも私が知ることができるものから。また、配列やループ以外の特殊文字のリストを照合するより良い方法を見つけることはできません。助けてもらえますか？私の望みは、このようなリンクを作ることです：http://domain.com/this-is-my-link。ここに私のコードは次のとおりです。

$('#title').blur(function() { 
     var hyphenated; 
     hyphenated = urlTitle($(this).val());    
     $('#link').val(hyphenated);  
}); 


function urlTitle(text) {  
    var characters = [' ', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '+', '=', '_', '{', '}', '[', ']', '|', '/', '<', '>', ',', '.', '?', '--']; 

    for (var i = 0; i < characters.length; i++) { 
     var char = String(characters[i]); 
     text = text.replace(/char/g, '-'); 

}   
    text = text.toLowerCase(); 
    return text; 
} 

Answer 1

問題は、あなたのエスケープ機能である：

text = text.replace(/char/g, '-'); 

これは文字通り "チャー" と一致します。だから、I'm building a string out of charsとすれば、it will returni'm building a string out of -sです。

変数を使用して正規表現を動的に作成する場合は、文字列とRegExp constructorを使用して正規表現を作成する必要があります。このフォーマットを使用するときにフラグは、コンストラクタの2番目のパラメータとして渡され、その（前方の前と後にスラッシュ）を区切り文字を指定する必要がないこと

は

text = text.replace(new RegExp("\\" + char, "g"), '-'); 

注意。私は、あなたが置き換えたいかもしれない特殊文字をエスケープするためにバックスラッシュを追加しました。

Live example

Answer 2

あなたは（/文字/）、正規表現リテラルではそのような変数名を使用することはできません。適切にエスケープされた値を持つRegExpオブジェクトを使用するか、置換するすべての文字に一致する単一の正規表現リテラルを作成します。

function urlTitle(text) { 
    var removeRe = /[^\w\s]/ig, 
     spacesRe = /[\s]/ig; 
    return text.toLowerCase().replace(removeChars, '').replace(spaceChars, '-'); 
} 

これは二重のスペースを二重「-'sになっているという弱点があります。

Answer 3

私はこのようなものを作品のバージョンを持っています。それは別の正規表現で改善することができます。