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

Возжелал я простого решения для замены текстовых смайликов на соответствующие картинки. Причём работать это решение должно не на стороне сервера, а на стороне клиента. Логично, что использовать предполагается 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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-11-29
Да, можно.
Комментатор
Комментарий добавил(а): xrystalll
Дата добавления: 2015-11-29
А можно ли заменить текст смайла ":)" на цифровой код, например ":001"?
Комментатор
Комментарий добавил(а): Сонджу
Дата добавления: 2015-01-31
edapskov, ага, спасибо. Взял "-" в квадратные скобки и все отлично работает :-)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-01-30
Поправка: перед закрывающейся круглой скобкой должен быть обратный слеш (обрезан движком сайта).
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-01-30
Сонджу, я не шибко разбираюсь в регулярных выражениях, но сдаётся мне, что потребуется примерно такое:

/:[-]*[)]+/gi
Комментатор
Комментарий добавил(а): Сонджу
Дата добавления: 2015-01-30
Скрипт бесспорно хороший, но как быть когда нужно заменить и смайл с "-", и без него?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-12-10
Просто парсит страницу и заменяет текст на смайлы.
Комментатор
Комментарий добавил(а): Сергей
Дата добавления: 2013-12-09
Не совсем понятно. Эта функция просто парсит страницу и заменят текст на смайл или при вводе текста например ":)" в текстовое поле, он вместо текст автоматически заменяется на графический? По типу Mail.Ru агента.
Комментатор
Комментарий добавил(а): Юрий Владимирович
Дата добавления: 2013-07-27
Пытаюсь подогнать всё это под движок dcms пока не получается
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2011-12-19
Сам долго искал... Пришлось делать самому :-)
Добавить комментарий:







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

Идиот-тест

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

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