Подтвердить что ты не робот

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

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

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-адрес с именем изображения).

ЧИТАЙТЕ! Очень важно!

Ответ 1

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

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 :)');

Ответ 2

for ( smile in emoticons )
{
   text = text.replace(smile, '<img src="' + url + emoticons[smile] + '" />');
}

Ответ 3

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

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;
}