Лучший способ удержать пользователя на сайте, это позволить ему найти, то что он ищет. Если вы делаете для этого удобную систему, то уровень предпочтения вашего сайта будет расти и пользователь обязательно вернётся для того, чтобы найти то, что его интересует.
Я вам покажу как создать простую, но эффективную по функционалу, поисковую форму, которая будет использоваться для поиска статей на сайте. Результаты будут появляться на странице без никаких перезагрузок, что несомненно является лучшим способом подачи информации.
Я создам 2 файла: search.php, который будет содержать HTML и JavaScript. Второй файл, do_search.php будет содержать PHP код. Приступим к созданию первого файла:
PHP, jQuery search demo
$(function() {
$(".search_button").click(function() {
// получаем то, что написал пользователь
var searchString = $("#search_box").val();
// формируем строку запроса
var data = "search="+ searchString;
// если searchString не пустая
if(searchString) {
// делаем ajax запрос
$.ajax({
type: "POST",
url: "do_search.php",
data: data,
beforeSend: function(html) { // запустится до вызова запроса
$("#results").html("");
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // запустится после получения результатов
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
Попробуйте ввести слово ajax
Результаты для
В этом файле мы создали обычную HTML форму, которая посылает POST запрос в бэк энд - файлу do_search.php.
PHP код содержит комментарии, по которым вы с лёгкостью сможете понять работу скрипта. Если в базе данных нашлись совпадения, вы показываете их вашему пользователю, выделяя жирным те слова, которые искал пользователь.
Придадим всему этому немного CSS:
Body{ font-family:Arial, Helvetica, sans-serif; } *{ margin:0;padding:0; } #container { margin: 0 auto; width: 600px; } a { color:#DF3D82; text-decoration:none } a:hover { color:#DF3D82; text-decoration:underline; } ul.update { list-style:none;font-size:1.1em; margin-top:10px } ul.update li{ height:30px; border-bottom:#dedede solid 1px; text-align:left;} ul.update li:first-child{ border-top:#dedede solid 1px; height:30px; text-align:left; } #flash { margin-top:20px; text-align:left; } #searchresults { text-align:left; margin-top:20px; display:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#000; } .word { font-weight:bold; color:#000000; } #search_box { padding:4px; border:solid 1px #666666; width:300px; height:30px; font-size:18px;-moz-border-radius: 6px;-webkit-border-radius: 6px; } .search_button { border:#000000 solid 1px; padding: 6px; color:#000; font-weight:bold; font-size:16px;-moz-border-radius: 6px;-webkit-border-radius: 6px; } .found { font-weight: bold; font-style: italic; color: #ff0000; } h2 { margin-right: 70px; }
Вот вы и научились создавать простейшую поисковую форму, которая работает без перезагрузки страницы. Надеюсь, урок вам понравился.
Регулярные выражения – это очень полезный инструмент для разработчиков. С их помощью можно находить, определять или заменять текст, слова или любые другие символы. В сегодняшней статье собраны 15 наиболее полезных регулярных выражений, которые пригодятся любому веб-разработчику.
Введение в регулярные выраженияМногим начинающим разработчикам кажется, что регулярные выражения очень сложны для понимания и использования. На самом деле, все не так уж сложно, как может показаться. Прежде чем мы непосредственно перейдем к регулярным выражениям, с их полезным и универсальным кодом, давайте взглянем на основы:
Синтаксис регулярных выражений
| Регулярное выражение | Означает |
| foo | Строка “foo” |
| ^foo | Строка начинается с “foo” |
| foo$ | Строка заканчивается на “foo” |
| ^foo$ | «foo» встречается в строке только один раз |
| a, b, или c | |
| любой символ в нижнем регистре | |
| [^A-Z] | любой символ, не находящийся в верхнем регистре |
| (gif|jpg) | Означает как «gif” так и “jpeg” |
| + | Один или более символов нижнего регистра |
| Любая цифра, точка или знак минус | |
| ^{1,}$ | Любое слово, хотя бы одна буква, число или _ |
| ()() | wy, wz, xy, или xz |
| (^A-Za-z0-9) | Любой символ (не число и не буква) |
| ({3}|{4}) | Означает три буквы или 4 цифры |
PHP-функции для регулярных выражений
| Функция | Описание |
| preg_match() | Функция preg_match() ищет строку по заданному шаблону, возвращает true, если строка находится и false, в остальных случаях |
| preg_match_all() | Функция preg_match_all() находит все вхождения строки, заданной по шаблону |
| preg_replace() | Функция preg_replace(), действует по тому же принципу, что и ereg_replace(), за исключением того, что регулярные выражения можно использовать как для задания шаблона поиска, так и для строки, на которую следует заменить, найденное значение. |
| preg_split() | Функция preg_split(), действует так же как split(), за исключением того, что регулярное выражение можно использовать в качестве параметра для шаблона поиска. |
| preg_grep() | Функция preg_grep() ищет все элементы входного массива, возвращая все элементы, соответствующие шаблону регулярного выражения. |
| preg_quote() | Экранирует символы регулярного выражения |
Проверяем, является ли строка правильным доменным именем
$url = "http://komunitasweb.com/"; if (preg_match("/^(http|https|ftp)://(*(?:.*)+):?(d+)?/?/i", $url)) { echo "Your url is ok."; } else { echo "Wrong url."; }
Подсветка слова в текстеЭто очень полезное регулярное выражение, с его помощью вы можете найти нужное слово и подсветить его. Особенно полезно для отображения результатов поиска.
$text = "Sample sentence from KomunitasWeb, regex has become popular in web programming. Now we learn regex. According to wikipedia, Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor"; $text = preg_replace("/b(regex)b/i", "1", $text); echo $text;
Подсветка результатов поиска в WordPress блогеКак уже говорилось в предыдущем примере, этот пример кода, удобно использовать в выдаче поисковых результатов и есть отличный способ внедрить эту функцию в wordpress-блог.
Откройте ваш файл search.php, и найдите функцию the_title(). Замените ее следующим кодом:
Echo $title;
Теперь, выше этой строки, добавьте этот код:
Сохраните файл search.php, и откройте style.css. Добавьте следующую строку:
Strong.search-excerpt { background: yellow; }
Получение всех картинок из HTML-документаЕсли вам когда-нибудь требовалось получить все картинки с веб-страницы, этот код должен быть Вы легко сможете создать загрузчик изображений с помощью возможностей cURL
$images = array(); preg_match_all("/(img|src)=("|\")[^"\">]+/i", $data, $media); unset($data); $data = preg_replace("/(img|src)("|\"|="|=\")(.*)/i", "$3", $media); foreach ($data as $url) { $info = pathinfo($url); if (isset($info["extension"])) { if (($info["extension"] == "jpg") || ($info["extension"] == "jpeg") || ($info["extension"] == "gif") || ($info["extension"] == "png")) array_push($images, $url); } }
Удаление повторяющихся слов (не чувствителен к регистру)Во время печатания, часто повторяются слова? Поможет это регулярное выражение.
$text = preg_replace("/s(w+s)1/i", "$1", $text);
Удаление повторяющейся пунктуацииТо же самое, только для пунктуации. Попрощайтесь с двойными запятыми.
$text = preg_replace("/.+/i", ".", $text);
Поиск XML/HTML тэговЭта простая функция, принимает два аргумента. Первый – это тэг, который вам нужно найти, и второй – это переменная, содержащая XML или HTML. Повторюсь, эту функцию очень удобно использовать вместе с cURL.
Function get_tag($tag, $xml) { $tag = preg_quote($tag); preg_match_all("{]*>(.*?)."}", $xml, $matches, PREG_PATTERN_ORDER); return $matches; }
Поиск XHTML/XML тэгов с определенным значением атрибутаЭта функция очень похожа на предыдущую, за исключением того, что вы можете задать тегу нужный атрибут. Например, вы легко сможете найти .
Function get_tag($attr, $value, $xml, $tag=null) { if(is_null($tag)) $tag = "\w+"; else $tag = preg_quote($tag); $attr = preg_quote($attr); $value = preg_quote($value); $tag_regex = "/]*$attr\s*=\s*". "(["\"])$value\\2[^>]*>(.*?)/" preg_match_all($tag_regex, $xml, $matches, PREG_PATTERN_ORDER); return $matches; }
Поиск шестнадцатеричных значений цветовЕще один полезный инструмент для веб-разработчика! Он позволяет вам находить/проверять шестнадцатеричные значение цвета.
$string = "#555555"; if (preg_match("/^#(?:(?:{3}){1,2})$/i", $string)) { echo "example 6 successful."; }
Поиск заголовка статьиЭтот фрагмент кода найдет и выведет на экран текст, находящийся внутри тэгов , на html-странице.
$fp = fopen("http://www.catswhocode.com/blog","r"); while (!feof($fp)){ $page .= fgets($fp, 4096); } $titre = eregi("(.*)",$page,$regs); echo $regs; fclose($fp);
Парсинг логов ApacheБольшинство сайтов запущено на всем известном веб-сервере Apache. Если ваш сайт находится в их числе, почему бы не использовать PHP и регулярные выражения для разбора логов апача?
//Logs: Apache web server //Successful hits to HTML files only. Useful for counting the number of page views. "^((?#client IP or domain name)S+)s+((?#basic authentication)S+s+S+)s+[((?#date and time)[^]]+)]s+"(?:GET|POST|HEAD) ((?#file)/[^ ?"]+?.html?)??((?#parameters)[^ ?"]+)? HTTP/+"s+(?#status code)200s+((?#bytes transferred)[-0-9]+)s+"((?#referrer)[^"]*)"s+"((?#user agent)[^"]*)"$" //Logs: Apache web server //404 errors only "^((?#client IP or domain name)S+)s+((?#basic authentication)S+s+S+)s+[((?#date and time)[^]]+)]s+"(?:GET|POST|HEAD) ((?#file)[^ ?"]+)??((?#parameters)[^ ?"]+)? HTTP/+"s+(?#status code)404s+((?#bytes transferred)[-0-9]+)s+"((?#referrer)[^"]*)"s+"((?#user agent)[^"]*)"$"
Замена двойных кавычек “умными” кавычкамиЕсли вы любитель типографики, вам понравится это регулярное выражение, заменяющее обычные двойные кавычки, на “умные кавычки”. Похожее регулярное выражение используется в wordpress в контенте страницы.
Preg_replace("B"b([^"x84x93x94rn]+)b"B", "?1?", $text);
Комплексная проверка пароляЭто регулярное выражение будет следить за тем, чтобы в текстовое поле было введено не менее шести символов, цифры, дефисы и подчеркивания.
Текстовое поле должно содержать как минимум один символ верхнего регистра, один нижнего регистра и одну цифру.
"A(?=[-_a-zA-Z0-9]*?)(?=[-_a-zA-Z0-9]*?)(?=[-_a-zA-Z0-9]*?)[-_a-zA-Z0-9]{6,}z"
WordPress: Использование регулярного выражения для получения картинок из записиПоскольку многие из вас являются пользователями WordPress, вам возможно пригодится код, который позволяет получить все картинки, из текста статьи, и вывести их.
Для того, чтобы использовать этот код, просто вставьте его в любой файл вашей темы.