Сделаем на JavaScript аналог функции в PHP htmlspecialchars()

Как-то нужно было вывести с помощью JavaScript на страницу текст, который в принципе мог содержать все что угодно, в том числе и теги HTML. Но не хотелось, чтобы какой-нибудь скриптик выполнялся невидимо для меня, да теги форматирования тоже нужно было видеть, в общем, нужно было видеть исходный текст полностью. Вспомнил, что в PHP есть такая функция htmlspecialchars() , которая преобразовывает определенные символы на мнемонический код HTML. Но вот в JavaScript такой функции я не обнаружил. И тогда решил написать такую функцию на JavaScript самостоятельно.
Для начала давайте разберемся, чего мы хотим. Функция htmlspecialchars() преобразует следующие символы
  • символ & преобразует в &
  • символ < преобразует в &lt;
  • символ > преобразует в &gt;
  • символ ' преобразует в & #039;
  • символ " преобразует в "

Что нужно делать, теперь понятно. Но в JavaScript нет, не, то что аналога функции htmlspecialchars(), но нет и функции, которая бы заменяла нужный нам фрагмент в тексте на заданную подстроку. Поэтому напишем такую функцию сейчас самостоятельно. Для написания такой функции воспользуемся также методом indexOf(), который имеется у каждой текстовой строки, в качестве аргументов передаются искомая текстовая строка, и номер символа с которого будет начинаться поиск. Второй аргумент не обязателен и по умолчанию он равен 0. Этот метод indexOf() возвращает значение (-1), если заданная подстрока не найдена; если же заданная подстрока найдена, то метод вернет позицию первого символа искомой подстроки. Тут надо помнить, что отсчет позиций ведется с нуля, то есть первый символ в текстовой строке будет находиться на позиции равной 0, второй символ будет находиться на позиции равной 1, и т.д.
После нескольких минут размышлений написал нужную функцию
Код
function jsStringReplace(text,searchString, replaceString)
{
lengthSearchString=searchString.length;
lengthReplaceString=replaceString.length;
rezultText=text;
start_poz=0;//начальная позиция с которой начинаем поиск заданной подстроки
while ((poz=rezultText.indexOf(searchString,start_poz))!=-1)
{
firstPart=rezultText.substring(0,poz);
lengthRezultText=rezultText.length;
endPart=rezultText.substring(poz+lengthSearchString, lengthRezultText );
rezultText=firstPart+replaceString+endPart;
start_poz=poz+lengthReplaceString;
}
return (rezultText);
}

Думаю, принцип работы функции понятен, но все, же поясню. Функции jsStringReplace() передается три аргумента
  1. text - исходный текст, в котором и происходят необходимые преобразования;
  2. searchString - искомая подстрока;
  3. replaceString - подстрока, на которую нужно заменить фрагменты текста, совпавшие с искомой подстрокой.

Функция jsStringReplace() возвратит исходный текст, если в нем небыли найдены вхождения искомой подстроки.
Сам же скрипт работает следующим образом. Методом indexOf() ищем искомую подстроку, и если она найдена, то делим исходный текст на три части: первая часть - это подстрока от первого символа исходной строки до первого символа найденного вхождения, вторая - это найденная подстрока, третья - оставшаяся часть от конца найденного вхождения до конца исходной строки. Теперь просто соединяем первую часть, подстроку на которую нужно заменить найденной вхождение и третью часть, таким образом, мы получили замену необходимой подстроки. Для продолжения поиска и замены, позицию поиска ставим сразу же за замененным текстом. И продолжаем поиск и замену покамест все вхождения не обработаются.
Теперь осталось написать функцию, которая бы выполняла необходимые нам преобразования с текстом (описаны выше). Это не сложная функция, просто в ней вызываем нужное количество раз функцию jsStringReplace() с необходимыми параметрами.
Код
function jsCodeHtmlChars(r)
{
r=jsStringReplace(r,"&","&amp;");
r=jsStringReplace(r,"<","&lt;");
r=jsStringReplace(r,">","&gt;");

r=jsStringReplace(r,"'","'");
r=jsStringReplace(r,'"',""");
return (r);
}
function jsStringReplace(text,searchString, replaceString)
{
lengthSearchString=searchString.length;
lengthReplaceString=replaceString.length;
rezultText=text;
start_poz=0;//начальная позиция с которой начинаем поиск заданной подстроки
while ((poz=rezultText.indexOf(searchString,start_poz))!=-1)
{
firstPart=rezultText.substring(0,poz);
lengthRezultText=rezultText.length;
endPart=rezultText.substring(poz+lengthSearchString, lengthRezultText );
rezultText=firstPart+replaceString+endPart;
start_poz=poz+lengthReplaceString;
}
return (rezultText);
}

Теперь мы получили функцию для преобразования определенных символов в мнемонический код. Пример использования этой функции
Код
htmlText="<div><h1>Заголовок</h1>Текст какой-нибудь очень <b>интересный</b> и <i>занимательный</i></div>";
codeHtmlText= jsCodeHtmlChars(htmlText);
document.write(codeHtmlText);

При использовании данного примера не забудьте вставить в код JavaScript две выше приведенные функции.
Опубликовано 08 августа 2008 г.
Комментарии к публикации
Всего комментариев: 4
прохожий: Гость | 31.10.2009, 10:20 #
А str.replace() на что? ;)
Суперадмин: | 01.11.2009, 22:17 #
Метод replace() - использует регулярные выражения. Можно конечно его использовать, но в статье говориться об использовании простых функций замены текста.
прохожий: Гость | 14.02.2011, 11:34 #
Вот
function htmlspecialchars(r)
{return r.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/'/g,''').replace(/"/g,'"');}
прохожий: Гость | 08.11.2009, 06:34 #
Не хватает живого примера !
Вход в аккаунт
Новости сайта