5

我有一个文本区域，用户可以在其中输入内容，还可以包含表情符号，例如 :) 或 ;)

当按下“Sent”时，需要解析 textarea 字符串以将任何表情符号转换为<img>'s 以供显示。

我可以轻松生成表情符号列表以及相关图像，例如：

 ':)' - '<img src="/images/happy.jpg"/>'
 ';)' - '<img src="/images/wink.jpg"/>'

我假设以上内容可以放入关联数组中。

有人能指出我正确的方向来创建表情符号和 html img 标签的关联数组，然后解析一个字符串以用 html img 标签替换匹配的符号吗？

出于兴趣还有没有更好的方法来做到这一点？

谢谢你

4

4 回答 4

5

您实际上完全描述了这种行为：

var map = {
    ':)':   '<img src="/images/happy.jpg"/>',
    ';(':   '<img src="/images/wink.jpg"/>'
},
text    = document.getElementsByTagName('textarea')[ 0 ].value;

Object.keys( map ).forEach(function( ico ) {
    // escape special characters for regex
    var icoE   = ico.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
    // now replace actual symbols
    text       = text.replace( new RegExp(icoE, 'g'), map[ico] );
});

示例：http: //jsfiddle.net/DBfpw/2/

编辑
为了创建一个有效的正则表达式，我们需要转义)和(

注意
上面的代码片段包含ECMAscript5特色代码。如果您需要在旧版浏览器上运行它，请确保包含ES5 Shim库。

注 2
抱歉，上面的代码不包含任何 jQuery 代码，因为它不是必需的。

于 2012-11-17T02:43:15.237 回答
2

我会创建一个对象数组，例如：

var emoticons = [{regex: /:\)/g, image: "happy"},
                 {regex: /;\)/g, image: "wink"},
                 etc...]

然后遍历该数组以进行替换

for(var i = 0; i < emoticons.length; i++) {
    str = str.replace(emoticons[i].regex, 
        '<img src="/' + emoticons[i].image + '.jpg"/>');
}
于 2012-11-17T02:45:17.743 回答
2

您可以在用户键入时使用 JavaScript 替换表情符号。但是将替换后的表情符号的字符串发送到服务器脚本并不是一个好方法。这是不安全的方式- 任何人都可以在提交到服务器端脚本之前在客户端替换您的内容。保存<img src="images/sad.jpg">而不是 :-( 或进行一些替换会更好。要存储的数据更少+您可以更轻松地用新的图像/图像位置和任何其他字符串替换它。

因此，一种方法是将字符串发布到服务器端脚本以存储在数据库中。对于视图渲染（在发送到浏览器之前），您可以使用函数（如下所示）将每个表情符号字符串替换为特定图像：

<?php
    $text = 'Hey :-), how are you doing bro? Having some fun :-D? Lets meet :-(';

    $smileys = array(
        ':-)' => 'happy',
        ':-(' => 'sad',
        ':-D' => 'tongue'
    );

    foreach($smileys as $key => $value) { 
            $text =  str_replace($key, '<img srce="images/'.$value .'.jpg">', $text);
    }

    echo $text;
?>
于 2012-11-17T02:58:09.413 回答
1 
// Start off by listing all supported emoticons and their names
var emoticons = {
    ":)": "smile",
    ":P": "tongue",
    ":(": "sad",
}, regex = [];

// push a regex for each one (:\)) onto an array.  Escape each special character
// each component is wrapped in unescaped parentheses to *capture* the token
// dynamically building this is optional -
// you may want to generate the regex once and use the literal
for(var emoticon in emoticons) {
    if(emoticons.hasOwnProperty(emoticon)) {
        regex.push("("+emoticon.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1")+")");
    }
}

//join the array to form a string and use the regex OR operator.
regex = new RegExp(regex.join("|"), "g");
// Now the regex looks like this - /(:\))|(:P)|(:\()/g

// String replace function also takes a function as the second parameter.
// The function takes the captured text, (what we put in parenthesis earlier)
// and you can use it to refer to the emoticon hash at the beginning.
// Then you return the desired replaced text.
text = text.replace(regex, function(captured) {
    return "<img src='"+emoticons[captured]+".jpg'/>";
});

jsFiddle demo of this technique

于 2012-11-17T03:04:08.507 回答