«Фильтруй базар» или учимся фильтровать текст – Уроки Mootools – Урок 9


Привет, люди планеты Земля! 1) хочу перед всеми извинится, если это кому-либо важно, за много месяxный перерыв… Мне стыдно!!!! Сам не ожидал, что так получится, но свадьба – дело тонкое, трудоемкое, которое требует много времени. Да, я женился, отдохнул, и готов к новым урокам. Еще, в качестве оправдания хочу сказать, что все это время я не забывал о блоге, своем не развитом, и хотя бы записывал идеи постов, которые, как мне кажется, окажутся полезными. Некоторые темы уже даже наполовину готовы, осталось только их дописать и опубликовать – всего ничего! Ну а пока, внимание! Смотрим на доску!

Если кто не заметил, я перешел от вручную написанного моим знакомым программистом движка на более популярный вордпрес. Это не означает, что ЦМСка моего знакомого не хороша – наоборот, она хороша тем, что она заточена под определенные действия, а именно под продвижение. Но, так как эту систему управления написал не я, я в ней совсем не разбираюсь, а дергать человека постоянно не хочу, решил перейти на вордпрес. Благо, по этой тематике в интернете много всего понаписано, да и просто покопаться в коде вордпреса тоже полезно для развития. Итак, все старые посты перекинуты, теперь все по-прежнему. Продолжаю публиковать уроки Mootools. Вот он следующий урок, о фильтрации текста.

Функции обработки строк

В этом уроке поговорим о том, какие возможности нам предоставляет библиотека Mootools при работе с данными в виде строк. Сразу нужно отметить, что то, что будет показано в этом уроке – это лишь ничтожная часть того, что Mootools может предоставить для работы со строками. В качестве небольшой иллюстрации можно привести функцию сamelCase(), которая переделывает текст такого-типа в текст ТакогоТипа (или любую другую функцию обработки текста, основанную на регулярных выражениях). Итак, в этом уроке мы пробежимся по основам работы с текстовыми строками, а потом углубимся дальше.

Перед тем, как мы продолжим, взглянем на то, как такие функции вызываются:

var my_text_variable = "Сюда вставляем текстовую строку";
 
//  результат переменная с исходником.наименование функции
var result_of_function = my_text_variable.someStringFunction();

Только ради большей эрудиции, следует отметить, что строковые функции можно вызывать и непосредственно с исходником:

var result_of_function = "Сюда вставляем текст".someStringFunction();

Обратите внимание, что так же можно вызвать и функцию для обработки числа:

//Обратите внимание на использование скобок
 
//тогда как при работе со строками используются кавычки
var limited_number = (256).limit(1, 100);

Также, хочет отметить вот что: Ява скрипты не должны вычищать пользовательский текст перед посылкой его на сервер для дальнейшей обработки. Все, что пишится на JavaScript может быть видно ВСЕМ посетителям страницы, эти скрипты можно включать/выключать, потому настоятельно рекоммендую не использовать JavaScript для обеспечения безопасности. Надеюсь не забуду провести небольшой дискурс по поводу безопасности с помощью PHP, когда мы дойдем до класса Mootools Request. И еще раз – все скрипты обеспечивающие безопасность должны выполняться на сервере, подальше от пользователя, а не с помощью JavaScript и всего к нему относящемуся!!!

trim()

Функция trim() позволяет, как и в языке PHP, быстро и эффективно избавить строку от лишних пробелов и пустого пространсва по обеим сторонам.

//Текст, который мы "тримируем"
var text_to_trim =  "    \nСтрока с ненужным пустым местом     ";
 
//  переменная trimmed_text стала такой: "Строка с ненужным пустым местом"
var trimmed_text = text_to_trim.trim();

Если вы еще не сталкивались с таким символом, как “\n”, сообщаю, что этот символ соответствует новой строке (от англ. “Newline“). Этот символ можно использовать в тексте, который нужно разбить на строки. Такой символ, или разрыв строк, фунцией trim() считается как пустое пространство, потому от него функция тоже избавляется. Жаль только, что trim() не избавляет от пустого пространства внутри текста:

var trimDemo = function(){
	//дадим тексту переменную
 
	var text_to_trim =  '            \nочень       много       белого\n              ';
 
	//тримируем
 
	var trimmed_text = text_to_trim.trim();
 
	//Смотрим результат
	alert('До тримирования: \n' + 
		  '|-' + text_to_trim + '-|\n\n' +
 
		  'После тримирования : \n' +  
	      '|-' + trimmed_text + '-|');
}

clean()

Понятно, заваливать весь текст пробелами – нехорошо. Потому, разработчики Mootools пошли навстречу тем, кто так считает. Функция clean() очистит не только пробелы и «пробело-образные» символы до и после текста, но и внутри него:

//Текст для очистки
var text_to_clean =  "    \nТекст     \nс      большим \n \n    количеством     \nпробелов  \n   ";
 
//  очищенный текст будет таким "Текст с большим количеством пробелов"
var cleaned_text  = text_to_trim.clean();

Как показывает пример, функция clean() – это тотже trim(), только с возможностью чистки пробелов внутри текста. Таким образом, эта функция почистит весь текст от пробелов в количестве более 2-х поряд, и от всех табов (\t) и разрывов строк (\n). Давайте сравним результаты работы этих двух функций:

var cleanDemo = function(){
	//Прикрепляем исходник к переменной
	var text_to_clean =  '            слишком \n       много\n       пробелов              ';
 
 
	//Чистим
	var cleaned_text = text_to_clean.clean();
 
 
	//Выводим результат в окно alert()
	alert('До чистки : \n' + 
		  '|-' + text_to_clean + '-|\n\n' +
 
		  'После чистки : \n' +  
	      '|-' + cleaned_text + '-|');
 
}

contains()

Как и 2 предыдущие рассмотренные функции, функция Mootools contains() делает одну очень простую вещь, без особенностей и заморочек: она проверяет, содержиться ли в исходном тексте заданная строка. В качестве результата работы возвращается True если вхождения есть и False – если нет.

//Строка с исходным текстом
var string_to_match = "В этом тексте ведем поиск?";
 
//Ищем слово "тексте", did_string_match возвращает true
var did_string_match = string_to_match.contains('тексте');
 
 
//Ищем слово "ужас", функция возвращает False
did_string_match = string_to_match.contains('ужас');

Эта функция может пригодится во многих приложениях на Вашем сайте/блоге/сайте, особенно в комплексе с другими Mootools функциями. Например, если использовать функцию clean() с функцией each() для приминения пользовательской функции к каждому элементу массива (см. урок 3), можно сделать довольно многое, засоряя лишь несколько строк. Например, если мы создадим некий массив слов, запрещенных к использованию в комментариях, можно просмотреть весь текст на предмет использования этих слов. При этом, используется не такая уж и большая фукнция:

	string_to_match = "сюда вставляем любой текст, в котором нужно проводить поиски";
	word_array = ['слова', 'которые', 'нужно', 'найти'];
 
	//Передаем каждое слово в качестве переменного аргумента функции
	word_array.each(function(word_to_match){
		//Поиск текущего слова
		if (string_to_match.contains(word_to_match)){
 
			alert('было найдено слово' + word_to_match + '! НЕХОРОШО!');
		};
 
	});

На базе такого примера можно сотворить много чудесных скриптиков, как например такой инструмент, вылавливающий нецензурные и бранные слова или названия конкурентных товаров или брендов :)

var containsDemo = function (textAreaID){
 
	//Создаем список запрещенных слов
	var banned_words = ['BMW', 'Audi', 'Fererro Roche', 'хрень', 'херня', 'мудак'];	
 
 
	//берем содержимое тега textarea
	var textarea_input = $(textAreaID).get('value');
 
 
	//эта переменная будет отвечать за количество НЕ найденых совпадений
    //чтобы можно было отблагодарить пользователей
    //за чистоту речи, если вдруг такое случится
	var i = 0;
 
 
   	//используя функцию each() пробегаем по каждому слову этого текста
	banned_words.each(function(banned_word){
		//ищем запрещенные слова указанные в списке
 
		if (textarea_input.contains(banned_word)){
 
			//Сообщаем пользователю, что такие плохие слова использовать очень плохо!
			alert('Слово ' + banned_word + ' тут использовать нельзя!');
 
		}
		//Если совпадение по очередному слову не найдено
        //перемнная i увеличивается на 1
		else ++i;
	});
 
    //Если i ровняется количеству запрещенных слов, значит пользователь их не использовал
    //Благодарим пользователя за чистоту речи
	if (i==banned_words.length) alert ("Спасибо, что не используете ненависные нам слова!");
 
}



substitute()

Функция substitute() – это очень мощный инструмент несмотря на свою кажущююся простоту. Сегодня мы затронем лишь ее основы, но отметим, что основная мощь ее исходит из возможности использовать ее с регулярными выражениями, которые мы рассмотрим в последующих уроках. Однако, только лишь основные возможности этой функции уже позволяет немного поиздеваться над исходным текстом.

//Это текст, который функция будет использовать
//в качестве шаблона. Обращаю внимание, что слова, которые 
//нужно заменить, помещаются в фигурные скобки
var text_for_substitute = "Майонез - это {один},  Кетчуп - это {два}, Горчица - это {три}.";
 
//Далее содаем объекс, в котором содержаться правила замены
 
//Слова справа, не помещенные в кавычки - это слова
//которые будут заменены словами слева, помещенными
//в кавычки
var substitution_object = {
	один: 'лучшая заправка для салата', 
	два: 'соус, который хорошо подходит к мясу, особенно к шашлыку', 
	три: 'такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит'
 
    };
 
//вызываем функцию substitute() с объектом, 
//в котором находятся шаблоны замены   
var new_string = text_for_substitute.substitute(substitution_object); 
 
 
//теперь наш текст выглядит вот так:
//"Майонез - это лучшая заправка для салата,
//Кетчуп - это соус, который хорошо подходит к мясу, особенно к шашлыку,
//Горчица - это такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит."

Вообще не всегда обязательно нужно создавать объект с шаблонами, т.к. можно обойтись и таким кодом:

//Создаем текст с отметками для замены
var text_for_substitute = "{это_нужно_заменить} и оригинальный текст";
 
//А шаблон для замены в виде объекта можно передать функции substitute()
//в виде параметра
var result_text = text_for_substitute.substitute({это_нужно_заменить: 'Значение замены'});
 
//результатом функции будет "Значение замены и оригинальный текст"

Чем дальше, тем глубже! Вместо стандартных словоформ в кавычках (слова слева) можно использовать элементы DOMа, т.е. можно создавать более интерактивные приложения на сайте:

var substituteDemo = function(){
	//Берем оригинальный тест из соответствующего элемента DOM
 
	var original_text = $('substitute_span').get('html');
 
 
	//Определяем, чем будем заменять:
	//а заменять мы будем текстом введеным в текстовое поле
	var new_text = original_text.substitute({
 
		первый  : $('first_value').get('value'),
		второй : $('second_value').get('value'),
 
		третий  : $('third_value').get('value'),
	});
 
 
	//Заменяем первоначальный текст на новый
	$('substitute_span').set('html', new_text);
 
 
 
	//Отключаем кнопку замены и включаем кнопку сброса
	$('simple_substitute').set('disabled', true);
 
	$('simple_sub_reset').set('disabled', false);
}
 
 
var substituteReset = function(){
	//Создаем переменную для первоначального текста
	var original_text = "|- {first} -- {second} -- {third} -|";
 
 
	//Заменяем текст в соответствующем элементе на первоначальный 
	$('substitute_span').set('html', original_text);
 
 
	//Выключаем кнопку сброса и включаем кнопку замены
	$('simple_sub_reset').set('disabled', true);
 
	$('simple_substitute').set('disabled', false);
}

|- {первый} — {второй} — {третий} -|

Первая замена: Вторая замена: Третья замена:

И, напоследок, еще немного теории. При приминении функции substitute() к строке, всегда нужно предоставлять функции объект со всеми парами «ключ : значение», так как иначе функция просто удалит все, что найдет между фигурными скобками (включая сами фигурные скобки). Потому, будьте осторожны, при использовании такой строки в качестве полигона действий:

("{раз} блаблабла {два} и пусть бе-бе-бе").substitute({раз : 'текст на замену'});

В конечном итоге получится

, , , ,

  1. #1 by Алексей on 16.08.2010 - 10:55 am

    А продолжение будет?
    Или самому английский шпрехать :)

    • #2 by proglammer on 16.08.2010 - 10:56 am

      удет :) у меня незапамятных времен лежат заготовки на тему немного отдаленную от программирования на мутулз, но 10 урок уже на подходе. завершающие штрихи только нанести нужно :) спасибо за ожидание! мне приятно, что кому-то интересны эти уроки!

  2. #4 by Roman on 16.08.2010 - 10:56 am

    Уроки хорошие, очень полезны начинающим. Большое спасибо автору!!!!:)

  3. #6 by Александр on 28.10.2010 - 1:27 pm

    Как и 2 предыдущие рассмотренные функции, функция Mootools clean()??? … проверяет, содержиться ли в исходном тексте заданная строка. Мы внимательно читаем! Спасибо за уроки!

  4. #8 by Александр on 28.10.2010 - 1:43 pm

    А, даже так, ну тогда удалите, пожалуйста оба комм после прочтения. Там у вас маленькая опечатка вкралась. Да и в следующем абзаце по-моему не про clean(),а про contains() говорится.

  5. #9 by nick259 on 04.02.2012 - 5:23 pm

    Спс огромное! Замечательные уроки…

(никто не узнает)

Код на картинке: