Заменяем текстовые смайлики на картинки

Возжелал я простого решения для замены текстовых смайликов на соответствующие картинки. Причём работать это решение должно не на стороне сервера, а на стороне клиента. Логично, что использовать предполагается JavaScript.

Начал поиски готовых решений... изучил несколько первых страниц выдачи яндекса... Но в чистом виде не один из вариантов меня не устраивал. Предложенные варианты были или чрезмерно сложные (а так хотелось простоты и ясности), или неудобными (лично для меня), а то и просто были заточены под какие-то конкретные движки.

Но, изучив чужие наработки, всё-таки собрал простенький JS-скрипт, который и приводится ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заменяем текстовые смайлики картинками</title>
<script type="text/javascript">
/*
запускаем скрипт, который заменяет текстовые смайлики на графические после загрузки страницы
*/
window.onload = function(){
smiley_replace();
}
/*
в многомерном массиве smiley хранится информация, необходимая для работы скрипта:
- регулярное выражение, с помощью которого скрипт будет находить текстовые смайлики;
- имя картинки с графическим смайликом;
- альтернативный текст, который будет показываться, если картинка по каким-то причинам не загрузится.
*/
smiley = new Array([/:-?\)+/gi,"smile.gif",":-)"],[/:-?\(+/gi,"sad.gif",":-("]);
/*
функция, которая и будет заменять текстовые смайлы на графические
*/
function smiley_replace(){
for(i=0;i<smiley.length;i++){
document.getElementById("mytxt").innerHTML = document.getElementById("mytxt").innerHTML.replace(smiley[i][0], '<img src="'+smiley[i][1]+'" alt="'+smiley[i][0]+'"/>');
}
}
</script>
</head>
<body>
<div id="mytxt">Основной текст, в котором есть весёлый :-) и печальный смайлик :-(</div>
</body>
</html>

Как можно заметить, всё невероятно просто. И при этом... работает! :-) Проверил в нескольких браузерах и проблем не обнаружил. Хотя, не исключено, что могут возникнуть конфликты с другими JS-скриптами, но такая возможность существует всегда и везде.

Данный пример знает только два вида смайликов (которые описаны в массиве smiley), но их список можно легко расширить. Понятное дело, что надо знать меру. Большой список смайликов и(или) большой текст, в который эти смайлы предстоит вставлять, могут создать чрезмерную нагрузку на браузер.

Ниже приводится пример работы данного скрипта:

Дополнение

В приведённом выше примере очень мало смайликов. Но это легко исправить. На данном сайте, например, стоит расширенный список смайликов:

smiley = new Array([/:-?\)+/gi,"smile.gif",":-)"],[/:-?\(+/gi,"sad.gif",":-("],[/;-?\(+/gi,"crying.gif",";-("],[/:-?Ъ/gi,"language.gif",":-Ъ"],[/:-?D/gi,"laugh.gif",":-D"],[/:-?\|+/gi,"neutral.gif",":-|"],[/:-?\\+/gi,"pout.gif",":-\\"],[/;-?\)+/gi,"wink.gif",":-)"]);

Автор: admin

Дата добавления: 2011-07-09

Просмотров: 11134

Рейтинг поста: +15-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Noob
Дата добавления: 2011-12-19
Спс, долго искал :D
Комментатор
Комментарий добавил(а): Den
Дата добавления: 2011-09-19
Спасибо большое за разъяснения. Буду пробывать.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2011-09-19
Для *ROFL* :

[/\*ROFL\*/gi,"rolf.gif","*ROFL*"]

Для @}->-- :

[/@\}->--/gi,"mypic.gif","@\}->--"]

Обычная подстановка здесь не проходит по простой причине: имена смайлов содержат спецсимволы ("*", "}"), которые в регулярных выражениях надо экранировать обратным слешем ("\").
Комментатор
Комментарий добавил(а): Den
Дата добавления: 2011-09-18
Доброго времени суток.
Такой вопрос, а как можно в этом скрипте сделать распознование смайлов типа *ROFL* , @}->-- , \m/ пробывал просто подставлять их, но тогда смайлы вообще перестают отображаться.
Или же можно ли использовать такой скрипт: smiles.zip .
Там уже готовая карта смайлов от квипа
Заранее спасибо.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2011-09-07
Рад, что смог быть полезным :-)
Комментатор
Комментарий добавил(а): Eugene
Дата добавления: 2011-09-07
Спасибо! Оно работает! :-)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2011-09-07
Вопрос понятен. Внёс изменения в пост.
Комментатор
Комментарий добавил(а): Eugene
Дата добавления: 2011-09-07
Жаль только на 2 смайла. Я в этом деле дуб и свои смайлики добавить не смог. :(
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Страница 2 из 2: 12
Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика