Javascript正則表達式替換帶有圖釋的文本

Question

我需要用表情符號替換;)或:p之類的文本，但我無法創建正則表達式來檢測此情況。現在我只能探測到像:wink:

function replaceEmoticons(text) { 
    var emots = { 
    ";)": "wink", 
    ":)": "xxx", 
    ":p": "xxx", 

    }; 

    return text.replace(/:(.*?):/g, function (match) { 
    return typeof emots[match] != 'undefined' ? 
      '<img src="http://localhost:8080/'+emots[match]+'.png"/>' : 
      match; 
    }); 
} 

是什麼了良好的正則表達式？

Answer 1

此函數接受一個字符串並返回一個字符串，其中包含在emots對象內發現的所有替換項。

function replaceText(text) { 
    var emots = { 
    ";)": "wink", 
    ":)": "xxx", 
    ":p": "xxx", 
    }; 

    for(var key in emots){ 
    if(emots.hasOwnProperty(key)){ 
     text = text.replace(new RegExp(escapeRegExp(key), 'g'), '<img src="http://localhost:8080/' + emots[key] + '.png"/>'); 
    } 
    } 
    return text; 
} 

function escapeRegExp(str) { 
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
} 

Answer 2

請嘗試以下操作。但是，在製作正則表達式時，您應該避開表情符號中的特殊字符（和）。

//輔助函數來在正則表達式

function RegExpEscape(text) { 
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 
} 

function replaceEmoticons(text) { 
    var emoticons = { 
     ':)'   : 'smile.gif', 
     ':('   : 'sad.gif', 
     ';)'   : 'wink.gif' 


    } 

    var result = text; 
    var emotcode; 
    var regex; 

    for (emotcode in emoticons) 
    { 
     regex = new RegExp(RegExpEscape(emotcode), 'gi'); 
     result = result.replace(regex, function(match) { 
      var pic = emots[match.toLowerCase()]; 

      if (pic != undefined) { 
       return '<img src="' + pic + '"/>'; 
        } else { 
       return match; 
        } 
       }); 
    } 

    return result;  
} 

Answer 3

我改性AK1's answer和提供的示例轉義特殊字符。

// Official Twitch robot emotes: https://twitchemotes.com 
 
var emoticons = { 
 
    ':)' : 'ebf60cd72f7aa600', 
 
    ':(' : 'd570c4b3b8d8fc4d', 
 
    ':o' : 'ae4e17f5b9624e2f', 
 
    ':z' : 'b9cbb6884788aa62', 
 
    'B)' : '2cde79cfe74c6169', 
 
    ':\\' : '374120835234cb29', 
 
    ';)' : '3407bf911ad2fd4a', 
 
    ';p' : '3407bf911ad2fd4a', 
 
    ':p' : 'e838e5e34d9f240c', 
 
    'R)' : '0536d670860bf733', 
 
    'o_O' : '8e128fa8dc1de29c', 
 
    ':D' : '9f2ac5d4b53913d7', 
 
    '>(' : 'd31223e81104544a', 
 
    '<3' : '577ade91d46d7edc' 
 
} 
 
// Convert the emoticon map entries into their fully-qualified paths. 
 
mapIdsToPaths(emoticons, 
 
       'https://static-cdn.jtvnw.net/jtv_user_pictures/', 
 
       'chansub-global-emoticon-', 
 
       '24x18'); 
 

 
// Replace all possible emotes in each paragraph. 
 
document.querySelectorAll('p').forEach(e => e.innerHTML = replaceEmoticons(e.innerHTML, emoticons)); 
 

 
function replaceEmoticons(text, emotes) { 
 
    return Object.keys(emotes).reduce((result, emote) => { 
 
     return result.replace(new RegExp(RegExpEscape(emote), 'gi'), function(match) { 
 
     return (img => img != null ? '<img src="' + img + '"/>' : match)(emotes[match]); 
 
     }); 
 
    }, text); 
 
} 
 

 
// helper function to escape special characters in regex 
 
function RegExpEscape(text) { 
 
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 
 
} 
 

 
// Map emote ids to their URLs. 
 
function mapIdsToPaths(emotes, url, prefix, size) { 
 
    Object.keys(emotes).forEach((id) => { 
 
    emotes[id] = url + prefix + emotes[id] + '-' + size + '.png'; 
 
    }); 
 
}

<p>Hello ;)<p> 
 
<p>How are you :)?<p> 
 
<p>o_O Today was not a good day... :(<p>