0

Здравствуйте. Нужно заменить определенный текст на определенную картинку. Нашел готовое решение - http://jsfiddle.net/EJJuM/ но здесь смайлы заменяются на юникод, а нужно, что бы заменялось на картинки.

<input class="emojify" type="text" />

$(document).ready(function() {
  // Map plaintext smilies to Unicode equivalents
  var emoji = {
                ':)': '\u263a',
                ':(': '\u2639'
              },

      // Function to escape regular expressions
      reEscape = function(s) {
                   return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                 };

  $('input.emojify').keyup(function() {
    var text = $(this).val();

    // See if any of our emoji exist in the text and replace with Unicode
    $.each(emoji, function(plaintext, unicode) {
       text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
    });

    // Replace text with new values
    $(this).val(text);
  });
});

Я вижу это так, но это не работает:

  var emoji = {
                ':)': 'smile',
                ':(': 'sad'
              },

  reEscape = function(s) {
               return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "<img src='images/smiles/\\$&.png'>");
             };

3 ответа 3

1

В textarea нельзя вставить картинку. Можно только символы.

Вы можете воспользоваться либо готовыми html wysiwyg редакторами. Например, TinyMCE.

Или реализовать самостоятельно нужные функции. Есть хорошая статья с примерами.

4
  • Как тогда в ВК сделали?
    – gm-111
    23 июл 2015 в 14:36
  • А у них textarea?
    – pavelip
    23 июл 2015 в 18:35
  • Походу нет. Лол, сообщение в диве писать, вот это нонсенс.
    – gm-111
    24 июл 2015 в 5:45
  • Ну, я ж описал как этого можно добиться ;)
    – pavelip
    24 июл 2015 в 5:48
0

Как вариант - подключить иконочный шрифт с нужными смайлами и заменять текст на символы этого шрифта. Но у него (шрифта), должны быть и обычные буквы, так как у textarea может быть только один шрифт.

3
  • Не нашел шрифтов, с подходящими смайлами.
    – gm-111
    23 июл 2015 в 14:36
  • Не силен в этой теме, но по моему есть онлайн сервисы генерации нужных шрифтов с иконками из картинок. Или у дизайнера можно заказать. 23 июл 2015 в 17:31
  • Это уже лишнее.
    – gm-111
    24 июл 2015 в 5:48
0

В textarea не получится. Очень простой пример в редактируемом divе.

function PS() {
    var emText = ":),:(,|+,|-,|||,|$,|2,$2";
    var emImg = '1,2,31,41,51,61,72,82';
    var arr1 = emText.split(',');
    var arr2 = emImg.split(',');
    var str = txt.innerText;

    for (var i = 0; i < arr1.length; i++) {

        if (~str.indexOf(arr1[i])) {
            var emoji = arr1[i].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
            
            txt.innerHTML = txt.innerHTML.replace(new RegExp('' + emoji + '', "g"), '<img src="https://pedro404.files.wordpress.com/2018/03/' + arr2[i] + '.png">');
        }
    }
}
div, span {
    border: 1px solid #bbbbbb;
    padding: 5px;
    margin: 10px;
}
img {
    width: 50px;
}
<span>:)</span><span>:(</span><span>|+</span><span>|-</span>
<span>|||</span><span>|$</span><span>|2</span><span>$2</span>
<div id="txt" contenteditable="true" onkeydown="PS();">:) :( |+ |- ||| |$ |2 $2</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.