Js RegExp на жизненных примерах
javascript, 04.08.2009 Вторник, 20:51
Теги:
Теги:
Я не буду рассказывать подробно о значении каждого знака в регулярном выражении. Для этого достаточно ознакомится с множеством литературы по этой теме:
http://ru.wikipedia.org/wiki/Regexp - викистраничка о регекспах
http://www.softtime.ru/article/index.php?id_article=42 - ещё статья
http://experiment.net.ru/js2/?f=regexp.htm - большая кошерная статья
http://javascript.ru/basic/regular-expression - отличная вводная статья
В своей же статье я опишу принципы использования регулярных выражений на примерах "из жизни". На мой взгляд это как раз то, чего в сети и не хватает.
Регулярное выражение для определения формата файла
Часто бывает нужно определить, ссылку на что мы получили. С помощью регулярного выражения это достаточно легко сделать
Code
<script>
var url = "http://studioad.ru/image.png";
var format = url.match(/\.(\w+)($|#|\?)/)[1]; // получаем png
</script>
var url = "http://studioad.ru/image.png";
var format = url.match(/\.(\w+)($|#|\?)/)[1]; // получаем png
</script>
Регулярное выражение для проверки e-mail адреса
Чтобы узнать, правильно ли пользователь ввел адрес электронной почты, можно использовать следующее выражение:
Code
<script>
var mail = "admin@studioad.ru";
var check = /^[a-zA-Z0-9-_]+@([a-zA-Z0-9-_]+?\.)+\w+/.test(mail); // получаем true
</script>
var mail = "admin@studioad.ru";
var check = /^[a-zA-Z0-9-_]+@([a-zA-Z0-9-_]+?\.)+\w+/.test(mail); // получаем true
</script>
Регулярное выражение для создания BB кодов
Для того чтобы при обработке, например комментария, заменить сиволы так называемого BB кода на его html аналог так же используется регулярное выражение такого плана:
Code
<script>
var str = "Это строка комментария с [b]жирным[/b] выделением";
var message = str.replace(/\[(.+?)\](.+?)\[\/\1\]/g,'<$1>$2</$1>');
// в итоге получим "с <b>жирным</b> выделением"
</script>
var str = "Это строка комментария с [b]жирным[/b] выделением";
var message = str.replace(/\[(.+?)\](.+?)\[\/\1\]/g,'<$1>$2</$1>');
// в итоге получим "с <b>жирным</b> выделением"
</script>
Разделение строки на массив по нескольким знакам
Иногда бывает нужно разделить строку на массив не по одному знаку а по нескольким разным. Это можно сделать так:
Code
<script>
var str = 'one,two three!four^five';
var mass = str.split(/,| |!|\^/);
mass[0]; // выдаст one
mass[3]; // выдаст four
</script>
var str = 'one,two three!four^five';
var mass = str.split(/,| |!|\^/);
mass[0]; // выдаст one
mass[3]; // выдаст four
</script>
Резка длинных слов, чтобы предотвратить деформацию блока с текстом
На форумах, в гостевых книгах и блогах можно часто встретить посты, содержащие какие либо длинные слова, которые, растягивая блоки в которых находятся, зачастую портят весь вид страницы. Для того чтобы этого не произошло, можно воспользоваться вот таким выражением. Оно разрежет слова длиннее 15 знаков:
Code
<script>
var str = "Ааааааааааааааааааааааааааааааааааа";
var message = str.replace(/(\S{15}[^$])/g,'$1\n');
/*
В итоге получим
Ааааааааааааааа
ааааааааааааааа
ааааа
*/
</script>
var str = "Ааааааааааааааааааааааааааааааааааа";
var message = str.replace(/(\S{15}[^$])/g,'$1\n');
/*
В итоге получим
Ааааааааааааааа
ааааааааааааааа
ааааа
*/
</script>
Удаление пробелов в начале и конце строки, trim RegExp
Часто необходимое и меж тем очень простое регулярное выражение, которое удалит все пробелы в начале и конце полученной строки:
Code
<script>
var str = " <- лишние пробелы -> ";
var clearstr = str.match(/^\s*(.*?)\s*$/i)[1];
// в итоге получим "<- лишние пробелы ->"
</script>
var str = " <- лишние пробелы -> ";
var clearstr = str.match(/^\s*(.*?)\s*$/i)[1];
// в итоге получим "<- лишние пробелы ->"
</script>
Удаление переноса строки
Это выражение удалит все переносы строк:
Code
<script>
var str = "Текст с\r переносами\n строк";
var clearstr = str.replace(/\r|\n/g,'');
// в итоге получим "Текст с переносами строк"
</script>
var str = "Текст с\r переносами\n строк";
var clearstr = str.replace(/\r|\n/g,'');
// в итоге получим "Текст с переносами строк"
</script>
ВИДЕОДЕСЕРТ
Я решил прилогать к каждому посту интересное с моей точки зрения видео с просторов интернета. Сегодня это ролик под названием "Знаете ли вы?".
№1
Aleko
Сейчас времени нет дописывать...