Веб-компас сайтостроителей
Сделаем на JavaScript аналог функции в PHP htmlspecialchars()
Как-то нужно было вывести с помощью JavaScript на страницу текст, который в принципе мог содержать все что угодно, в том числе и теги HTML. Но не хотелось, чтобы какой-нибудь скриптик выполнялся невидимо для меня, да теги форматирования тоже нужно было видеть, в общем, нужно было видеть исходный текст полностью. Вспомнил, что в PHP есть такая функция htmlspecialchars() , которая преобразовывает определенные символы на мнемонический код HTML. Но вот в JavaScript такой функции я не обнаружил. И тогда решил написать такую функцию на JavaScript самостоятельно.
Для начала давайте разберемся, чего мы хотим. Функция htmlspecialchars() преобразует следующие символы
Что нужно делать, теперь понятно. Но в JavaScript нет, не, то что аналога функции htmlspecialchars(), но нет и функции, которая бы заменяла нужный нам фрагмент в тексте на заданную подстроку. Поэтому напишем такую функцию сейчас самостоятельно. Для написания такой функции воспользуемся также методом indexOf(), который имеется у каждой текстовой строки, в качестве аргументов передаются искомая текстовая строка, и номер символа с которого будет начинаться поиск. Второй аргумент не обязателен и по умолчанию он равен 0. Этот метод indexOf() возвращает значение (-1), если заданная подстрока не найдена; если же заданная подстрока найдена, то метод вернет позицию первого символа искомой подстроки. Тут надо помнить, что отсчет позиций ведется с нуля, то есть первый символ в текстовой строке будет находиться на позиции равной 0, второй символ будет находиться на позиции равной 1, и т.д.
После нескольких минут размышлений написал нужную функцию
Думаю, принцип работы функции понятен, но все, же поясню. Функции jsStringReplace() передается три аргумента
Функция jsStringReplace() возвратит исходный текст, если в нем небыли найдены вхождения искомой подстроки.
Сам же скрипт работает следующим образом. Методом indexOf() ищем искомую подстроку, и если она найдена, то делим исходный текст на три части: первая часть - это подстрока от первого символа исходной строки до первого символа найденного вхождения, вторая - это найденная подстрока, третья - оставшаяся часть от конца найденного вхождения до конца исходной строки. Теперь просто соединяем первую часть, подстроку на которую нужно заменить найденной вхождение и третью часть, таким образом, мы получили замену необходимой подстроки. Для продолжения поиска и замены, позицию поиска ставим сразу же за замененным текстом. И продолжаем поиск и замену покамест все вхождения не обработаются.
Теперь осталось написать функцию, которая бы выполняла необходимые нам преобразования с текстом (описаны выше). Это не сложная функция, просто в ней вызываем нужное количество раз функцию jsStringReplace() с необходимыми параметрами.
Теперь мы получили функцию для преобразования определенных символов в мнемонический код. Пример использования этой функции
При использовании данного примера не забудьте вставить в код JavaScript две выше приведенные функции.
Для начала давайте разберемся, чего мы хотим. Функция htmlspecialchars() преобразует следующие символы
- символ & преобразует в &
- символ < преобразует в <
- символ > преобразует в >
- символ ' преобразует в & #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() передается три аргумента
- text - исходный текст, в котором и происходят необходимые преобразования;
- searchString - искомая подстрока;
- replaceString - подстрока, на которую нужно заменить фрагменты текста, совпавшие с искомой подстрокой.
Функция jsStringReplace() возвратит исходный текст, если в нем небыли найдены вхождения искомой подстроки.
Сам же скрипт работает следующим образом. Методом indexOf() ищем искомую подстроку, и если она найдена, то делим исходный текст на три части: первая часть - это подстрока от первого символа исходной строки до первого символа найденного вхождения, вторая - это найденная подстрока, третья - оставшаяся часть от конца найденного вхождения до конца исходной строки. Теперь просто соединяем первую часть, подстроку на которую нужно заменить найденной вхождение и третью часть, таким образом, мы получили замену необходимой подстроки. Для продолжения поиска и замены, позицию поиска ставим сразу же за замененным текстом. И продолжаем поиск и замену покамест все вхождения не обработаются.
Теперь осталось написать функцию, которая бы выполняла необходимые нам преобразования с текстом (описаны выше). Это не сложная функция, просто в ней вызываем нужное количество раз функцию jsStringReplace() с необходимыми параметрами.
Код
function jsCodeHtmlChars(r)
{
r=jsStringReplace(r,"&","&");
r=jsStringReplace(r,"<","<");
r=jsStringReplace(r,">",">");
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.08.2008, просмотров 9805
Еще статьи из данной категории
Предыдущие статьи
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
function htmlspecialchars(r)
{return r.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/'/g,''').replace(/"/g,'"');}