<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS &#187; строка</title>
	<atom:link href="http://php.infoniac.ru/tag/%d1%81%d1%82%d1%80%d0%be%d0%ba%d0%b0/feed" rel="self" type="application/rss+xml" />
	<link>http://php.infoniac.ru</link>
	<description>Уроки программирования от новичка новичкам</description>
	<lastBuildDate>Tue, 07 Sep 2010 11:19:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>«Фильтруй базар» или учимся фильтровать текст – Уроки Mootools – Урок 9</title>
		<link>http://php.infoniac.ru/text-filtering-mootorial9.html</link>
		<comments>http://php.infoniac.ru/text-filtering-mootorial9.html#comments</comments>
		<pubDate>Mon, 16 Nov 2009 13:07:15 +0000</pubDate>
		<dc:creator>proglammer</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mootools]]></category>
		<category><![CDATA[Уроки новичка]]></category>
		<category><![CDATA[обработка текста]]></category>
		<category><![CDATA[строка]]></category>
		<category><![CDATA[текст]]></category>
		<category><![CDATA[уроки]]></category>

		<guid isPermaLink="false">http://php.infoniac.ru/?p=562</guid>
		<description><![CDATA[В продолжении урока №9 о фильтрации чисел, продолжим в том же духе: расмотрим уструменты, посволяющие фильтровать текст. Как говорилось и в 9-м уроке, инструментами Mootools можно осуществлять превентивные действия по обороне сайта от атак и ошибок при вводе данных, однако, ключевое слово тут "превентивные" - ВСЕ Javascript инструменты можно использовать как оружие первой линии обороны, но полноценно оборняться и огрождаться от ошибок ввода нужно сервеными инструментами! А пока, нырнем в фильтрацию с помощью Mootools.]]></description>
			<content:encoded><![CDATA[<div class="entry">
<div class="postbody entry clearfix">
<p>Привет, люди планеты Земля! 1) хочу перед всеми извинится, если это кому-либо важно, за много месяxный перерыв… Мне стыдно!!!! Сам не ожидал, что так получится, но свадьба – дело тонкое, трудоемкое, которое требует много времени. Да, я женился, отдохнул, и готов к новым урокам. Еще, в качестве оправдания хочу сказать, что все это время я не забывал о блоге, своем не развитом, и хотя бы записывал идеи постов, которые, как мне кажется, окажутся полезными. Некоторые темы уже даже наполовину готовы, осталось только их дописать и опубликовать – всего ничего! Ну а пока, внимание! Смотрим на доску!</p>
<p>Если кто не заметил, я перешел от вручную написанного моим знакомым программистом движка на более популярный вордпрес. Это не означает, что ЦМСка моего знакомого не хороша – наоборот, она хороша тем, что она заточена под определенные действия, а именно под продвижение. Но, так как эту систему управления написал не я, я в ней совсем не разбираюсь, а дергать человека постоянно не хочу, решил перейти на вордпрес. Благо, по этой тематике в интернете много всего понаписано, да и просто покопаться в коде вордпреса тоже полезно для развития. Итак, все старые посты перекинуты, теперь все по-прежнему. Продолжаю публиковать уроки Mootools. Вот он следующий урок, о фильтрации текста.</p>
<p><span id="more-129"></span></p>
<h2>Функции обработки строк</h2>
<p>В этом уроке поговорим о том, какие возможности нам предоставляет библиотека Mootools при работе с данными в виде строк. Сразу нужно отметить, что то, что будет показано в этом уроке – это лишь ничтожная часть того, что Mootools может предоставить для работы со строками. В качестве небольшой иллюстрации можно привести функцию <strong>сamelCase()</strong>, которая переделывает текст <em>такого-типа</em> в текст <em>ТакогоТипа</em> (или любую другую функцию обработки текста, основанную на регулярных выражениях). Итак, в этом уроке мы пробежимся по основам работы с текстовыми строками, а потом углубимся дальше.</p>
<p>Перед тем, как мы продолжим, взглянем на то, как такие функции вызываются:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> my_text_variable <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">"Сюда вставляем текстовую строку"</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//  результат переменная с исходником.наименование функции</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> result_of_function <span style="color: rgb(51, 153, 51);">=</span> my_text_variable.<span style="color: rgb(102, 0, 102);">someStringFunction</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Только ради большей эрудиции, следует отметить, что строковые функции можно вызывать и непосредственно с исходником:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> result_of_function <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">"Сюда вставляем текст"</span>.<span style="color: rgb(102, 0, 102);">someStringFunction</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Обратите внимание, что так же можно вызвать и функцию для обработки числа:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//Обратите внимание на использование скобок</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//тогда как при работе со строками используются кавычки</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> limited_number <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(204, 0, 0);">256</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">limit</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(204, 0, 0);">1</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(204, 0, 0);">100</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Также, хочет отметить вот что: Ява скрипты не должны вычищать пользовательский текст перед посылкой его на сервер для дальнейшей обработки. Все, что пишится на JavaScript может быть видно ВСЕМ посетителям страницы, эти скрипты можно включать/выключать, потому настоятельно рекоммендую не использовать JavaScript для обеспечения безопасности. Надеюсь не забуду провести небольшой дискурс по поводу безопасности с помощью PHP, когда мы дойдем до класса Mootools Request. И еще раз – <span style="color: rgb(153, 0, 0); font-weight: bold;">все скрипты обеспечивающие безопасность должны выполняться на сервере, подальше от пользователя, а не с помощью JavaScript и всего к нему относящемуся!!!</span></p>
<h3>trim()</h3>
<p>Функция <strong>trim()</strong> позволяет, как и в языке PHP, быстро и эффективно избавить строку от лишних пробелов и пустого пространсва по обеим сторонам.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//Текст, который мы "тримируем"</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> text_to_trim <span style="color: rgb(51, 153, 51);">=</span>  <span style="color: rgb(51, 102, 204);">"    <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>Строка с ненужным пустым местом     "</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//  переменная trimmed_text стала такой: "Строка с ненужным пустым местом"</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> trimmed_text <span style="color: rgb(51, 153, 51);">=</span> text_to_trim.<span style="color: rgb(102, 0, 102);">trim</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Если  вы еще не сталкивались с таким символом, как &laquo;\n&raquo;, сообщаю, что этот символ соответствует новой строке (от англ. &laquo;<em>Newline</em>&laquo;). Этот символ можно использовать в тексте, который нужно разбить на строки. Такой символ, или разрыв строк, фунцией <strong>trim()</strong> считается как пустое пространство, потому от него функция тоже избавляется. Жаль только, что <strong>trim()</strong> не избавляет от пустого пространства внутри текста:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> trimDemo <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">//дадим тексту переменную</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> text_to_trim <span style="color: rgb(51, 153, 51);">=</span>  <span style="color: rgb(51, 102, 204);">'            <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>очень       много       белого<span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>              '</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//тримируем</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> trimmed_text <span style="color: rgb(51, 153, 51);">=</span> text_to_trim.<span style="color: rgb(102, 0, 102);">trim</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Смотрим результат</span>
	<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'До тримирования: <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>'</span> <span style="color: rgb(51, 153, 51);">+</span>
		  <span style="color: rgb(51, 102, 204);">'|-'</span> <span style="color: rgb(51, 153, 51);">+</span> text_to_trim <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">'-|<span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span><span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>'</span> <span style="color: rgb(51, 153, 51);">+</span>
		  <span style="color: rgb(51, 102, 204);">'После тримирования : <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>'</span> <span style="color: rgb(51, 153, 51);">+</span>
	      <span style="color: rgb(51, 102, 204);">'|-'</span> <span style="color: rgb(51, 153, 51);">+</span> trimmed_text <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">'-|'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span></pre>
</p></div>
</div>
<p>
  <button id="trim">Тримирование</button>
</p>
<h3>clean()</h3>
<p>Понятно, заваливать весь текст пробелами – нехорошо. Потому, разработчики Mootools пошли навстречу тем, кто так считает. Функция <strong>clean()</strong> очистит не только пробелы и «пробело-образные» символы до и после текста, но и внутри него:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//Текст для очистки</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> text_to_clean <span style="color: rgb(51, 153, 51);">=</span>  <span style="color: rgb(51, 102, 204);">"    <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>Текст     <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>с      большим <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span> <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>    количеством     <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>пробелов  <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>   "</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//  очищенный текст будет таким "Текст с большим количеством пробелов"</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> cleaned_text  <span style="color: rgb(51, 153, 51);">=</span> text_to_trim.<span style="color: rgb(102, 0, 102);">clean</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Как показывает пример, функция <strong>clean()</strong> – это тотже <strong>trim()</strong>, только с возможностью чистки пробелов внутри текста. Таким образом, эта функция почистит весь текст от пробелов в количестве более 2-х поряд, и от всех табов (\t) и разрывов строк (\n). Давайте сравним результаты работы этих двух функций:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> cleanDemo <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Прикрепляем исходник к переменной</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> text_to_clean <span style="color: rgb(51, 153, 51);">=</span>  <span style="color: rgb(51, 102, 204);">'            слишком <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>       много<span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>       пробелов              '</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Чистим</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> cleaned_text <span style="color: rgb(51, 153, 51);">=</span> text_to_clean.<span style="color: rgb(102, 0, 102);">clean</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Выводим результат в окно alert()</span>
	<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'До чистки : <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>'</span> <span style="color: rgb(51, 153, 51);">+</span>
		  <span style="color: rgb(51, 102, 204);">'|-'</span> <span style="color: rgb(51, 153, 51);">+</span> text_to_clean <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">'-|<span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span><span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>'</span> <span style="color: rgb(51, 153, 51);">+</span>
		  <span style="color: rgb(51, 102, 204);">'После чистки : <span style="color: rgb(0, 0, 153); font-weight: bold;">\n</span>'</span> <span style="color: rgb(51, 153, 51);">+</span>
	      <span style="color: rgb(51, 102, 204);">'|-'</span> <span style="color: rgb(51, 153, 51);">+</span> cleaned_text <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">'-|'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span></pre>
</p></div>
</div>
<p>
  <button id="clean">Чистка</button>
</p>
<h3>contains()</h3>
<p>Как и 2 предыдущие рассмотренные функции, функция Mootools <strong>clean()</strong> делает одну очень простую вещь, без особенностей и заморочек: она проверяет, содержиться ли в исходном тексте заданная строка. В качестве результата работы возвращается <strong>True</strong> если вхождения есть и <strong>False</strong> – если нет.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//Строка с исходным текстом</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> string_to_match <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">"В этом тексте ведем поиск?"</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
<span style="color: rgb(0, 102, 0); font-style: italic;">//Ищем слово "тексте", did_string_match возвращает true</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> did_string_match <span style="color: rgb(51, 153, 51);">=</span> string_to_match.<span style="color: rgb(102, 0, 102);">contains</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'тексте'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
<span style="color: rgb(0, 102, 0); font-style: italic;">//Ищем слово "ужас", функция возвращает False</span>
did_string_match <span style="color: rgb(51, 153, 51);">=</span> string_to_match.<span style="color: rgb(102, 0, 102);">contains</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'ужас'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Эта функция может пригодится во многих приложениях на Вашем сайте/блоге/сайте, особенно в комплексе с другими Mootools функциями. Например, если использовать функцию <strong>clean()</strong> с функцией <strong>each()</strong> для приминения пользовательской функции к каждому элементу массива (<a href="http://php.infoniac.ru/mootorial-arrays-day3.html" title="30 дневный курс подготовки юного бойца – Mootools 1.2 – Урок 3 – Массивы  30 дневный курс подготовки юного бойца – Mootools 1.2 – Урок 3 – Массивы">см. урок 3</a>), можно сделать довольно многое, засоряя лишь несколько строк. Например, если мы создадим некий массив слов, запрещенных к использованию в комментариях, можно просмотреть весь текст на предмет использования этих слов. При этом, используется не такая уж и большая фукнция:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;">	string_to_match <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">"сюда вставляем любой текст, в котором нужно проводить поиски"</span><span style="color: rgb(51, 153, 51);">;</span>
	word_array <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">'слова'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'которые'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'нужно'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'найти'</span><span style="color: rgb(0, 153, 0);">]</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Передаем каждое слово в качестве переменного аргумента функции</span>
	word_array.<span style="color: rgb(102, 0, 102);">each</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>word_to_match<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">//Поиск текущего слова</span>
		<span style="color: rgb(0, 0, 102); font-weight: bold;">if</span> <span style="color: rgb(0, 153, 0);">(</span>string_to_match.<span style="color: rgb(102, 0, 102);">contains</span><span style="color: rgb(0, 153, 0);">(</span>word_to_match<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
			<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'было найдено слово'</span> <span style="color: rgb(51, 153, 51);">+</span> word_to_match <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">'! НЕХОРОШО!'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>На базе такого примера можно сотворить много чудесных скриптиков, как например такой инструмент, вылавливающий нецензурные и бранные слова или названия конкурентных товаров или брендов <img src="9_files/icon_smile.gif" alt=":)" class="wp-smiley"/> </p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> containsDemo <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span> <span style="color: rgb(0, 153, 0);">(</span>textAreaID<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Создаем список запрещенных слов</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> banned_words <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">'BMW'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'Audi'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'Fererro Roche'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'хрень'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'херня'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">'мудак'</span><span style="color: rgb(0, 153, 0);">]</span><span style="color: rgb(51, 153, 51);">;</span>	
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//берем содержимое тега textarea</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> textarea_input <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span>textAreaID<span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'value'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//эта переменная будет отвечать за количество НЕ найденых совпадений</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//чтобы можно было отблагодарить пользователей</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//за чистоту речи, если вдруг такое случиться</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> i <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(204, 0, 0);">0</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
   	<span style="color: rgb(0, 102, 0); font-style: italic;">//используя функцию each() пробегаем по каждому слову этого текста</span>
	banned_words.<span style="color: rgb(102, 0, 102);">each</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>banned_word<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">//ищем запрещенные слова указанные в списке</span>
		<span style="color: rgb(0, 0, 102); font-weight: bold;">if</span> <span style="color: rgb(0, 153, 0);">(</span>textarea_input.<span style="color: rgb(102, 0, 102);">contains</span><span style="color: rgb(0, 153, 0);">(</span>banned_word<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
&nbsp;
			<span style="color: rgb(0, 102, 0); font-style: italic;">//Сообщаем пользователю, что такие плохие слова использовать очень плохо!</span>
			<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'Слово '</span> <span style="color: rgb(51, 153, 51);">+</span> banned_word <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">' тут использовать нельзя!'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
		<span style="color: rgb(0, 153, 0);">}</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">//Если совпадение по очередному слову не найдено</span>
        <span style="color: rgb(0, 102, 0); font-style: italic;">//перемнная i увеличивается на 1</span>
		<span style="color: rgb(0, 0, 102); font-weight: bold;">else</span> <span style="color: rgb(51, 153, 51);">++</span>i<span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//Если i ровняется количеству запрещенных слов, значит пользователь их не использовал</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">//Благодарим пользователя за чистоту речи</span>
	<span style="color: rgb(0, 0, 102); font-weight: bold;">if</span> <span style="color: rgb(0, 153, 0);">(</span>i<span style="color: rgb(51, 153, 51);">==</span>banned_words.<span style="color: rgb(102, 0, 102);">length</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 0, 102);">alert</span> <span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"Спасибо, что не используете ненависные нам слова! <img src='http://php.infoniac.ru/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  "</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span></pre>
</p></div>
</div>
<p>
  <textarea cols="70" rows="4" id="textarea_1">Как-то раз ехал на своем BMW на фабрику Fererro Roche и тут меня подрезает какой-то мудак на своем Audi. Я ему вдогонку кричу «Ты что за хрень вытворяешь, мудак!!! Что за херня!»</textarea><br />
  <br />
  <button id="contains">Проверка на запрещенные слова</button>
</p>
<p>
  <textarea cols="70" rows="5" id="textarea_2" style="padding: 5px;">Как-то раз ехал на своем автомобиле на фабрику одной известной компании по производству всяких разных сладостей и тут меня подрезает какой-то нехороший человек на своем автомобиле. Я ему вдогонку кричу «Ты что за нехорошую вещь вытворяешь, нехороший человек!!! Ну как же так?! Что за люди то неприличные!?!»</textarea><br />
  <br />
  <button id="contains2">Проверка на запрещенные слова</button>
</p>
<h3>substitute()</h3>
<p>Функция <strong>substitute()</strong> – это очень мощный инструмент несмотря на свою кажущююся простоту. Сегодня мы затронем лишь ее основы, но отметим, что основная мощь ее исходит из возможности использовать ее с регулярными выражениями, которые мы рассмотрим в последующих уроках. Однако, только лишь основные возможности этой функции уже позволяет немного поиздеваться над исходным текстом.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//Это текст, который функция будет использовать</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//в качестве шаблона. Обращаю внимание, что слова, которые </span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//нужно заменить, помещаются в фигурные скобки</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> text_for_substitute <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">"Майонез - это {один},  Кетчуп - это {два}, Горчица - это {три}."</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
<span style="color: rgb(0, 102, 0); font-style: italic;">//Далее содаем объекс, в котором содержаться правила замены</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//Слова справа, не помещенные в кавычки - это слова</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//которые будут заменены словами слева, помещенными</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//в кавычки</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> substitution_object <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 153, 0);">{</span>
	один<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'лучшая заправка для салата'</span><span style="color: rgb(51, 153, 51);">,</span>
	два<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'соус, который хорошо подходит к мясу, особенно к шашлыку'</span><span style="color: rgb(51, 153, 51);">,</span>
	три<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит'</span>
    <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
<span style="color: rgb(0, 102, 0); font-style: italic;">//вызываем функцию substitute() с объектом, </span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//в котором находятся шаблоны замены   </span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> new_string <span style="color: rgb(51, 153, 51);">=</span> text_for_substitute.<span style="color: rgb(102, 0, 102);">substitute</span><span style="color: rgb(0, 153, 0);">(</span>substitution_object<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> 
&nbsp;
<span style="color: rgb(0, 102, 0); font-style: italic;">//теперь наш текст выглядит вот так:</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//"Майонез - это лучшая заправка для салата,</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//Кетчуп - это соус, который хорошо подходит к мясу, особенно к шашлыку,</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//Горчица - это такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит."</span></pre>
</p></div>
</div>
<p>Вообще не всегда обязательно нужно создавать объект с шаблонами, т.к. можно обойтись и таким кодом:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//Создаем текст с отметками для замены</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> text_for_substitute <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">"{это_нужно_заменить} и оригинальный текст"</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//А шаблон для замены в виде объекта можно передать функции substitute()</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//в виде параметра</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> result_text <span style="color: rgb(51, 153, 51);">=</span> text_for_substitute.<span style="color: rgb(102, 0, 102);">substitute</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>это_нужно_заменить<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'Значение замены'</span><span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//результатом функции будет "Значение замены и оригинальный текст"</span></pre>
</p></div>
</div>
<p>Чем дальше, тем глубже! Вместо стандартных словоформ в кавычках (слова слева) можно использовать элементы DOMа, т.е. можно создавать более интерактивные приложения на сайте:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> substituteDemo <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Берем оригинальный тест из соответствующего элемента DOM</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> original_text <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'substitute_span'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'html'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Определяем, чем будем заменять:</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">//а заменять мы будем текстом введеным в текстовое поле</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> new_text <span style="color: rgb(51, 153, 51);">=</span> original_text.<span style="color: rgb(102, 0, 102);">substitute</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>
		первый  <span style="color: rgb(51, 153, 51);">:</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'first_value'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'value'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">,</span>
		второй <span style="color: rgb(51, 153, 51);">:</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'second_value'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'value'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">,</span>
		третий  <span style="color: rgb(51, 153, 51);">:</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'third_value'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'value'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">,</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Заменяем первоначальный текст на новый</span>
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'substitute_span'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">set</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'html'</span><span style="color: rgb(51, 153, 51);">,</span> new_text<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Отключаем кнопку замены и включаем кнопку сброса</span>
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'simple_substitute'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">set</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'disabled'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">true</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'simple_sub_reset'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">set</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'disabled'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">false</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> substituteReset <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Создаем переменную для первоначального текста</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> original_text <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(51, 102, 204);">"|- {first} -- {second} -- {third} -|"</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Заменяем текст в соответствующем элементе на первоначальный </span>
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'substitute_span'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">set</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'html'</span><span style="color: rgb(51, 153, 51);">,</span> original_text<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
&nbsp;
	<span style="color: rgb(0, 102, 0); font-style: italic;">//Выключаем кнопку сброса и включаем кнопку замены</span>
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'simple_sub_reset'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">set</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'disabled'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">true</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'simple_substitute'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">set</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'disabled'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">false</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span></pre>
</p></div>
</div>
<p><span id="substitute_span">|- {первый} — {второй} — {третий} -|</span></p>
<p>Первая замена:</p>
<input size="6" id="first_value" type="text"/>
Вторая замена:</p>
<input size="6" id="second_value" type="text"/>
Третья замена:</p>
<input size="6" id="third_value" type="text"/>
<button id="simple_substitute">Замена</button><br />
<button id="simple_sub_reset">Сброс</button></p>
<p>И, напоследок, еще немного теории. При приминении функции <strong>substitute()</strong> к строке, всегда нужно предоставлять функции объект со всеми парами «ключ : значение», так как иначе функция просто удалит все, что найдет между фигурными скобками (включая сами фигурные скобки). Потому, будьте осторожны, при использовании такой строки в качестве полигона действий:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"{раз} блаблабла {два} и пусть бе-бе-бе"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">substitute</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>раз <span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">'текст на замену'</span><span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>В конечном итоге получится  <button id="last_warning">вот что</button>.</p>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://php.infoniac.ru/text-filtering-mootorial9.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
