複数の置換チェックを実行すると正しく置換されないのはなぜですか？

Question

私は:)のような笑顔の文字を画像に置き換えています。私だけを使用する場合

var yorum4 = "hello :)"; 
yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='smile.png' \/>"); 

正しく置き換えられます。私はそれが

<img src="http<img class=" 

のように破損して出力

yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='smile.png' \/>"); 
yorum4 = yorum4.replace(/(:\()/g, "<img class='smileys' src='smile1.png' \/>"); 
yorum4 = yorum4.replace(/(;\))/g, "<img class='smileys' src='smile2.png' \/>"); 

、複数の置き換えのためにこれを使用する場合ただし、複数の笑顔を交換するための正しい方法は何ですか？

編集：ここに完全なリストが

yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='i.png' \/>"); 
yorum4 = yorum4.replace(/(;\))/g, "<img class='smileys' src='j.png' \/>"); 
yorum4 = yorum4.replace(/(:\p)/g, "<img class='smileys' src='b.png' \/>"); 
yorum4 = yorum4.replace(/(:\P)/g, "<img class='smileys' src='b.png' \/>"); 
yorum4 = yorum4.replace(/(:\D)/g, "<img class='smileys' src='c.png' \/>"); 
yorum4 = yorum4.replace(/(:\d)/g, "<img class='smileys' src='c.png' \/>"); 
yorum4 = yorum4.replace(/(:'\()/g, "<img class='smileys' src='d.png' \/>"); 
yorum4 = yorum4.replace(/(:\*)/g, "<img class='smileys' src='a.png' \/>"); 
yorum4 = yorum4.replace(/(<\3)/g, "<img class='smileys' src='f.png' \/>"); 
yorum4 = yorum4.replace(/(:\o)/g, "<img class='smileys' src='he.png' \/>"); 
yorum4 = yorum4.replace(/(:\O)/g, "<img class='smileys' src='e.png' \/>"); 
yorum4 = yorum4.replace(/(:\()/g, "<img class='smileys' src='s.png' \/>"); 

Answer 1

であるあなたの/:\D/パターンはコロンと任意の非数字シンボルと一致するため、URLのプロトコル部分の内側:/を一致させることができます。

:Dスマイリーを意味する場合は、/:D/を使用してください。 のリテラルの文字と数字でも同じです。エスケープしないでください。また、パターン全体でキャプチャグループを使用している点はありません。置換パターンで一致値を参照する必要がある場合は、$&（$1ではなく）を使用してください。

var yorum4 = "hello :)"; 
 
yorum4 = yorum4.replace(/:\)/g, "<img class='smileys' src='i.png' \/>"); 
 
yorum4 = yorum4.replace(/;\)/g, "<img class='smileys' src='j.png' \/>"); 
 
yorum4 = yorum4.replace(/:p/g, "<img class='smileys' src='b.png' \/>"); 
 
yorum4 = yorum4.replace(/:P/g, "<img class='smileys' src='b.png' \/>"); 
 
yorum4 = yorum4.replace(/:D/g, "<img class='smileys' src='c.png' \/>"); 
 
yorum4 = yorum4.replace(/:d/g, "<img class='smileys' src='c.png' \/>"); 
 
yorum4 = yorum4.replace(/:'\(/g, "<img class='smileys' src='d.png' \/>"); 
 
yorum4 = yorum4.replace(/:\*/g, "<img class='smileys' src='a.png' \/>"); 
 
yorum4 = yorum4.replace(/<3/g, "<img class='smileys' src='f.png' \/>"); 
 
yorum4 = yorum4.replace(/:o/g, "<img class='smileys' src='he.png' \/>"); 
 
yorum4 = yorum4.replace(/:O/g, "<img class='smileys' src='e.png' \/>"); 
 
yorum4 = yorum4.replace(/:\(/g, "<img class='smileys' src='s.png' \/>"); 
 
console.log(yorum4);

もう一つのヒント：あなたが/\B:\)\B/または/\B:D\b/のように、単語の境界と非ワード境界を使用することがありますが（非単語の文字や単語の境界の後/前に、非ワード境界\Bを追加します\bの前/後に）これ​​らのスマイリーを「単語全体」としてマッチさせることができますが、実際のデータなしで言うのは難しいです。

Answer 2

私はthis commentに言及し、もともとthis fiddleで実証技術を取り入れWiktor第の答えのちょうどスピン（あなたは受け入れるべきものではなく、この1）：

var yorum4 = "hello :)"; 
 
var smiles = { 
 
    ":)": "i.png", 
 
    ";)": "j.png", 
 
    ":p": "b.png", 
 
    ":P": "b.png", 
 
    ":D": "c.png", 
 
    ":d": "c.png", 
 
    ":'\(": "d.png", 
 
    ":*": "a.png", 
 
    "<3": "f.png", 
 
    ":o": "he.png", 
 
    ":O": "e.png", 
 
    ":(": "s.png" 
 
}; 
 
yorum4 = yorum4.replace(/:\)|;\)|:p|:P|:D|:d|:'\(|:\*|<3|:o|:O|:\(/g, function(m) { 
 
    return "<img class='smileys' src='" + smiles[m] + "' \/>"; 
 
}); 
 
console.log(yorum4);

もちろん、そのバージョンでは、それぞれのスマイリートークンを2回リストすることができます。 smilesオブジェクトのキーから正規表現を構築し、必要なエスケープ処理を確実に行うことができます。私はそれを読者に練習として残しておきます...