Замена текстовых смайлов на графические

Question

Замена текстовых смайлов на графические

Рейтинг: 0Ответов: 2Опубликовано: 12.01.2015

Доброго времени суток.

Подскажите, пожалуйста. Я новичок в js. Вот обращаюсь за помощью к знающим людям.

Нужно преобразовать текстовые смайлы на графические.

JS:

<script type="text/javascript">
function insertSmile(smile)
{
document.chatform.smile.value += smile;
}        
</script

Смайл, на который пользователь тыкает:

<img src="smiles/smile.gif" alt=":)" />

TEXTAREA:

<form method="POST" name="chatform">
<textarea  name="smile"></textarea>
</form>

**Буду очень благодарен.**

Обновление

Сам сделал следующее: добавил графическую картинку смайлика. Пользователь видит эту картинку около textarea, жмёт на смайлик, он вносится в textarea. При нажатии на кнопку "отправить" смайлик переносится в область с сообщениями, но в текстовом варианте, а нужно, чтобы он переносился в графическом.

javascript замена

Источник: Stack Overflow на русском

Answer 1

▲ 2

В textarea нельзя хранить какие-либо DOM элементы, это можно делать в блоке с атрибутом contenteditable="true".

Answer 2

▲ 1

Сообщения наверняка хранятся где-то, так? В текстовых файлах или в БД - не важно, и не важно, чем их оттуда выдирают. Важно, что перед тем как сообщение в виде текста попадёт на страницу (сформируется конечная HTML страница с сообщениями), все смайлы (коды смайлов ":-)", ":D", ":-D", "o_O") заменятся на <img src="smiles/smile.gif" alt=":)"> (используя в PHP функцию subst_replace, например) и аналогичные, таким образом на странице со списком сообщений вместо кодов со смайлами будут теги с картинками смайлов.

UPD: Лично у меня на Javascript вышло так:

<html>
<head>

</head>
<body>

<div name="message">Тестовое сообщение :)</div>
<div name="message">Тестовое сообщение :-)</div>
<div name="message">Тестовое сообщение :D</div>
<div name="message">Тестовое сообщение :(</div>
<script type="text/javascript">
var elems = document.getElementsByName("message");
var smiles = [":)",":D",":-)",":("];
for(var i=0; i<elems.length; i++) 
{
    for (var x=0;x<smiles.length;x++)
    {
    if (elems[i].innerHTML.indexOf(smiles[x])>-1)
        {
            elems[i].innerHTML = elems[i].innerHTML.replace(smiles[x],"<img title=\""+smiles[x]+"\" src=\"smile.gif\">");
        }
    }

}

</script>
</body>
</html>

Замена текстовых смайлов на графические

Ответы