5

ユーザーがコンテンツを入力でき、:)や;）などの絵文字記号を含めることができるテキストエリアがあります。

「送信済み」を押すと、テキストエリア文字列を解析して、絵文字記号を「」に変換し<img>て表示する必要があります。

絵文字のリストを簡単に生成でき、次のような関連画像があります。

 ':)' - '<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の注目のコードが含まれています。従来のブラウザで実行する必要がある場合は、必ずES5Shimライブラリを含めてください。

注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">する方が良いでしょう。保存するデータが少ない+新しい画像/画像の場所やその他の文字列に簡単に置き換えることができます。

したがって、1つの方法は、データベースに保存するためにサーバー側スクリプトに文字列を投稿することです。ビューレンダリング（ブラウザに送信する前）の場合、各絵文字文字列を特定の画像に置き換える関数（以下のようなもの）を使用できます。

<?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デモ

于 2012-11-17T03:04:08.507 に答える