Замените список смайликов с их изображениями - PullRequest
Новая
       2

Замените список смайликов с их изображениями

14 голосов
/ 16 июня 2010

У меня есть массив с: 

emoticons = {
   ':-)' : 'smile1.gif',
   ':)'  : 'smile2.gif',
   ':D'  : 'smile3.gif'     
}

тогда у меня есть переменная с текстом. 

var text = 'this is a simple test :)';

и переменная с URL сайта 

var url = "http://www.domain.com/";

Как написать функцию, которая заменяет символы на их изображения?

Результат тега <img> должен быть: 

<img src="http://www.domain.com/simple2.gif" />

(мне нужно объединить переменную URL с именем изображения).

Большое спасибо!

Ответы [ 3 ]

33 голосов
/ 16 июня 2010

Другой подход: 

function replaceEmoticons(text) {
  var emoticons = {
    ':-)' : 'smile1.gif',
    ':)'  : 'smile2.gif',
    ':D'  : 'smile3.gif'
  }, url = "http://www.domain.com/";
  // a simple regex to match the characters used in the emoticons
  return text.replace(/[:\-)D]+/g, function (match) {
    return typeof emoticons[match] != 'undefined' ?
           '<img src="'+url+emoticons[match]+'"/>' :
           match;
  });
}

replaceEmoticons('this is a simple test :)');
// "this is a simple test <img src="http://www.domain.com/smile2.gif"/>"

Редактировать: @ pepkin88 сделал действительно хорошее предложение, построить регулярное выражение на основе имен свойств объекта emoticons.

Это легко сделать, но мы должны избегать метасимволов, если мы хотим, чтобы это работало правильно.

Экранированные шаблоны хранятся в массиве, который позже используется для построения регулярного выражения с использованием конструктора RegExp, в основном объединяя все шаблоны, разделенные метасимволом |. 

function replaceEmoticons(text) {
  var emoticons = {
    ':-)' : 'smile1.gif',
    ':)'  : 'smile2.gif',
    ':D'  : 'smile3.gif',
    ':-|'  : 'smile4.gif'
  }, url = "http://www.domain.com/", patterns = [],
     metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;

  // build a regex pattern for each defined property
  for (var i in emoticons) {
    if (emoticons.hasOwnProperty(i)){ // escape metacharacters
      patterns.push('('+i.replace(metachars, "\\$&")+')');
    }
  }

  // build the regular expression and replace
  return text.replace(new RegExp(patterns.join('|'),'g'), function (match) {
    return typeof emoticons[match] != 'undefined' ?
           '<img src="'+url+emoticons[match]+'"/>' :
           match;
  });
}

replaceEmoticons('this is a simple test :-) :-| :D :)');
4 голосов
/ 16 июня 2010 
for ( smile in emoticons )
{
   text = text.replace(smile, '<img src="' + url + emoticons[smile] + '" />');
}
0 голосов
/ 10 сентября 2010

Использование регулярных выражений с массивом элементов find replace работает хорошо. 

var emotes = [
    [':\\\)', 'happy.png'],
    [':\\\(', 'sad.png']
];

function applyEmotesFormat(body){
    for(var i = 0; i < emotes.length; i++){
        body = body.replace(new RegExp(emotes[i][0], 'gi'), '<img src="emotes/' + emotes[i][1] + '">');
    }
    return body;
}
...