Веб-компас сайтостроителей
/ Все статьи / JavaScript / Примеры на JavaScript / Сделаем на JavaScript аналог функции в PHP htmlspecialchars()

Сделаем на 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 две выше приведенные функции.
Комментарии к публикации
Всего комментариев: 2
прохожий: Гость | 31.10.2009, 10:20 #
А str.replace() на что? ;)
Автор статьи: admin | 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 #
Не хватает живого примера !
Добавить комментарий
Новости сайта
  • 06.04.2020
    Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
  • 12.10.2012
    С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
  • 14.09.2011
    Создание современных сайтов не обходится без программирования, и на наш сайт www.linedmk.com так же освещает вопросы связанные с программированием на JavaScript и PHP. И поэтому мы поздравляем и вас и себя с этим праздником! :)
Последние публикации в каталоге статей