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