<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Парсинг BB-кодов

Парсинг BB-кодов

Если Вы создавали форум или создавали возможность комментирования на сайте, то, вполне вероятно, что Вы сталкивались с BB-кодами. На всякий случай, BB-коды - это набор тегов, похожих на HTML-теги, которые созданы для редактирования внешнего вида сообщения. Например, [b][/b], [url=http://google.ru]Google[/url], [img]http://myrusakov.ru/img.jpg[/img] - это всё различные BB-коды. И вот задача программиста состоит в том, чтобы преобразовать BB-коды в HTML-код. Вот парсингом BB-кода и превращением его в HTML-код, мы и займёмся в этой статье.

Сразу привожу код этого скрипта, а точнее функции, которая принимает текст с BB-кодами, а возвращает уже HTML-код:

<?php
  protected function replaceBBCode($text_post) {
    $str_search = array(
      "#\\\n#is",
      "#\[b\](.+?)\[\/b\]#is",
      "#\[i\](.+?)\[\/i\]#is",
      "#\[u\](.+?)\[\/u\]#is",
      "#\[code\](.+?)\[\/code\]#is",
      "#\[quote\](.+?)\[\/quote\]#is",
      "#\[url=(.+?)\](.+?)\[\/url\]#is",
      "#\[url\](.+?)\[\/url\]#is",
      "#\[img\](.+?)\[\/img\]#is",
      "#\[size=(.+?)\](.+?)\[\/size\]#is",
      "#\[color=(.+?)\](.+?)\[\/color\]#is",
      "#\[list\](.+?)\[\/list\]#is",
      "#\[listn](.+?)\[\/listn\]#is",
      "#\[\*\](.+?)\[\/\*\]#"
    );
    $str_replace = array(
      "<br />",
      "<b>\\1</b>",
      "<i>\\1</i>",
      "<span style='text-decoration:underline'>\\1</span>",
      "<code class='code'>\\1</code>",
      "<table width = '95%'><tr><td>Цитата</td></tr><tr><td class='quote'>\\1</td></tr></table>",
      "<a href='\\1'>\\2</a>",
      "<a href='\\1'>\\1</a>",
      "<img src='\\1' alt = 'Изображение' />",
      "<span style='font-size:\\1%'>\\2</span>",
      "<span style='color:\\1'>\\2</span>",
      "<ul>\\1</ul>",
      "<ol>\\1</ol>",
      "<li>\\1</li>"
    );
    return preg_replace($str_search, $str_replace, $text_post);
  }
?>

Как видите, казалось бы сложная задача элементарно решается фактически одной функцией - preg_replace(). Поэтому, когда меня спрашивают, а нужны ли эти регулярные выражения, я всегда отвечаю: "Да!". Если бы Вы решали эту задачу обычными строковыми функциями, то кода было бы намного больше, а результат был бы, скорее всего, хуже. Единственное, что в данной функции не делается - это проверка на корректность входных данных. Ведь пользователь может не закрыть тег (случайно удалил его, например) или, например, не соблюдать вложенность тегов, да много чего ещё. На практике, такими проверками никто не занимается, а в случае "кривого" сообщения, его правят вручную (обычно дефектность сразу видна).

Надеюсь, данная функция поможет Вам в парсинге BB-кодов. По аналогии, Вы можете добавить ещё различных BB-кодов, например, BB-код вставки видео с YouTube.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (36):

Dante Dante 09.07.2012 17:03:57

Спасибо огромное!))

Ответить

pashara pashara 15.07.2012 00:39:09

Вот точно так же и с вики разметкой. Можно и свою размтку придумать на сайт.

Ответить

wanderer wanderer 04.08.2012 14:01:49

Михаил вот не знал куда обратится с таким вопросом как сделать чтоб не табличка не разьезжалась, вот форма есть на сайте даже вот взять вашу форму добавления комментариев, если я сейчас напишу слово очень длинное то ваш дизайн не сломается, а слово перенесется на другую строку, как же мне сделать так же? вввввввввввввввввввввввввввввввввввввв

Ответить

wanderer wanderer 04.08.2012 14:02:31

о, прошу прощения, и у вас та же проблема. Как ее решить может вы знаете?

Ответить

Admin Admin 04.08.2012 20:26:36

В принципе можно написать на php скрипт, который будет обрезать слова больше определенной длины и остаток переносить на следующую строку.

Ответить

Muvahhid Muvahhid 17.05.2014 19:28:29

CSS - word-wrap: break-word; /* Перенос слов */

Ответить

informals informals 05.09.2012 16:38:18

нашел такой скрипт: <?php $bbcode = array( '/\[i\](.+?)\[\/i\]/isU' => '<em>$1</em>', '/\[b\](.+?)\[\/b\]/isU' => '<strong>$1</strong>', '/\[sub\](.+?)\[\/sub\]/isU' => '<sub>$1</sub>', '/\[sup\](.+?)\[\/sup\]/isU' => '<sup>$1</sup>', '/\[del\](.+?)\[\/del\]/isU' => '<del>$1</del>', '/\[u\](.+?)\[\/u\]/isU' => '<span style="text-decoration:underline;">$1</span>', '/\[big\](.+?)\[\/big\]/isU' => '<span style="font-size:large;">$1</span>', '/\[small\](.+?)\[\/small\]/isU' => '<span style="font-size:small;">$1</span>', '/\[code\](.+?)\[\/code\]/isU' => '<code>$1</code>', '/\[red\](.+?)\[\/red\]/isU' => '<span style="color:#ff0000;">$1</span>', '/\[yellow\](.+?)\[\/yellow\]/isU' => '<span style="color:#ffff00;">$1</span>', '/\[green\](.+?)\[\/green\]/isU' => '<span style="color:#00ff00;">$1</span>', '/\[blue\](.+?)\[\/blue\]/isU' => '<span style="color:#0000ff;">$1</span>', '/\[size=([0-9]+)\](.+?)\[\/size\]/isU' => '<span style="font-size:$1px;">$2</span>', '#\[color=(\#[0-9A-F]{3,6}|[a-z\-]+)\](.*)\[/color\]#isU' => '<span style="color:\\1">\\2</span>', '#\[align=(left|right|center)\](.*)\[/align\]#isU' => '<p style="text-align: \\1">\\2</p>', '#\[img=(.*?)\](.+?)\[\/img\]#' => '<img src="$2" align="$1">', '#\[img\](.+?)\[\/img\]#' => '<img src="$1">', '/\:\)/isU' => '<img src="smiles/smile.gif">' ); ?> предположим нужно отредактировать уже посланное сообщение. для этого нужно хтмд обратно в ббкод... кое что уже переделал в обратную функцию. вот: <?php $bbcodeEncode = array( '/\<em\>(.+?)\<\/em\>/isU' => '[i]$1[/i]', '/\<strong\>(.+?)\<\/strong\>/isU' => '[b]$1[/b]', '/\<sub\>(.+?)\<\/sub\>/isU' => '[sub]$1[/sub]', '/\<sup\>(.+?)\<\/sup\>/isU' => '[sup]$1[/sup]', '/\<del\>(.+?)\<\/del\>/isU' => '[del]$1[/del]', '/\<span style=\"text\-decoration\:underline\;\"\>(.+?)\<\/span\>/isU' => '[u]$1[/u]', '/\<span style=\"font\-size\:large\;\"\>(.+?)\<\/span\>/isU' => '[big]$1[/big]', '/\<span style=\"font\-size\:small\;\"\>(.+?)\<\/span\>/isU' => '[small]$1[/small]', '/\<code\>(.+?)\<\/code\>/isU' => '[code]$1[/code]', '/\<span style=\"font\-size\:([0-9]+)px\;\"\>(.+?)\<\/span\>/isU' => '[size=$1]$2[/size]', '/\<span style=\"color\:(\#[0-9A-F]{3,6}|[a-z\-]+)\"\>(.*?)\<\/span\>/isU' => '[color=\\1]\\2[/color]', '/\<p style=\"text\-align\:(left|right|center)\"\>(.*?)\<\/p\>/isU' => '[align=\\1]\\2[/align]', '/\<img src=\"(.+?)\" align=\"(.*?)\"\>/' => '[img=$1]$2[/img]', '/\<img src=\"(.+?)\"\>/' => '[img]$1[/img]', '/\<img src=\"smiles\/smile.gif\"\>/isU' => ':)' ); ?> так вот... предположим добавим строчку: [u]проверка[/u] [b]различных[/b] [color=green]тегов[/color] в базу пишется всё грамотно: <span style="text-decoration:underline;">проверка</span> <strong>различных</strong> <span style="color:green">тегов</span> теперь хочу отредактировать и получаю: [u]проверка</span> [b]различных[/b] <span style="color:green">тегов[/u] помогите, как это решить?!

Ответить

malina95 malina95 10.02.2013 08:15:09

Михаил, а как сделать так чтобы например в ссылке можно было-бы поставить после url= тоесть после ссылки поставить слово target=blank и в ссылку добавилось target = "_blank" ? Подскажите как сделать, а лучше дайте готовую регулярку. Я вас очень прошу

Ответить

Admin Admin 10.02.2013 08:19:35

"<a href='\\1'>\\2</a>" - вот сюда добавьте этот атрибут.

Ответить

malina95 malina95 10.02.2013 08:24:03

Так мне же не все ссылки нужны с бланком, мне бы отделбную регулярку или исправленную... Дайте код пожалуйста

Ответить

Admin Admin 10.02.2013 08:29:40

"#\[url=(.+?) t=(.+?)\](.+?)\[\/url\]#is" "<a href='\\1' target='\\2'>\\3</a>"

Ответить

malina95 malina95 10.02.2013 08:36:21

Спасибо большое, а что можно поставить вместо \\1? или только \\ работает в данном примере?

Ответить

malina95 malina95 10.02.2013 08:38:37

Не работает почему-то "#\[url=(.+?) t=(.+?)\](.+?)\[\/url\]#is", этим нужно заменить или поставить ещё одно условие?

Ответить

Admin Admin 10.02.2013 19:46:44

Ничего менять не нужно, вот пример работы: preg_replace("#\[url=(.+?) t=(.+?)\](.+?)\[\/url\]#is", "<a href='\\1' target='\\2'>\\3</a>", "[url=http://mysite.ru t=blank]сайт[/url]");

Ответить

malina95 malina95 10.02.2013 21:57:19

Ну всё равно не работает, посмотрите сами http://malinichev.ru/lesson/php-browser-user.html в статье есть ссылка на пример и она не работает, если заменить то не работает и если поставить ещё одно условие тоже не работает

Ответить

Admin Admin 11.02.2013 04:18:29

Вы старые url не удаляли? Там есть ещё 2 других варианта, вот этот третий нужно дописать, а не замещать ими 2 предыдущих. И смотрите внимательно, как пишется BB-код: [url=http://mysite.ru t=blank]сайт[/url]

Ответить

malina95 malina95 11.02.2013 20:28:55

А вы у себя проверяли? Просто у меня не работает, и к ссылке просто прибавляется t=_blank, старые не удалял, но всё равно не работает... Я уже не знаю что делать даже

Ответить

Admin Admin 11.02.2013 21:03:05

<a href='http://mysite.ru' target='blank'>сайт</a> - вот, что получается у меня после обработки.

Ответить

malina95 malina95 03.03.2013 16:28:27

А как отменить действие работы ббкодов? Просто если в коде писать регулярку ссылки, то она становиться ссылкой, как это отменить?

Ответить

Admin Admin 03.03.2013 21:19:29

Сделать обратное преобразование, опять же используя регулярные выражения. Хотя вообще в базе обычно хранятся BB-коды, которые потом выводятся в виде HTML, а при редактировании сообщения как раз выводятся BB-коды, что очень удобно.

Ответить

duddeniska duddeniska 30.06.2013 16:04:10

Михаил ты ЛУЧШИЙ!

Ответить

dm77 dm77 13.11.2013 12:34:00

Здравствуйте Михаил. Используя Вашу функцию replaceBBCode, как сделать(добавить) так чтобы она заменяла текстовые смайлы ;) :( :angry: на <img src="smiles/sm1.png"><img src="smiles/sm2.png">. Помогите пожалуйста

Ответить

Admin Admin 13.11.2013 21:25:23

$text = str_replace(array(":)", ":("), array("<img ...", "<img ..."), $text); - думаю, принцип ясен.

Ответить

shamil shamil 20.01.2014 09:54:05

не подскажете каким кодом нужно вставлять теги в форму,я использую js,но он не совсем удобен

Ответить

tikkiwiki tikkiwiki 21.01.2014 11:06:13

Шамиль, не совсем понял Ваш вопрос.

Ответить

shamil shamil 21.01.2014 14:11:33

я в принцепе тоже ничего не понимаю,но чтобы работали теги например [b][/b],они должны быть в форме. С помошью input я их туда добавляю.Но здесь такого кода нет.

Ответить

shamil shamil 21.01.2014 15:14:27

Некоторые js коды вставки тегов не подерживаются мобильными браузерами,как раз таким кодом пользуюсь, хотел поинтересоваться,есть ли универсальные.а вообще на ум пришла мысль с помощью hidden вставить в textarea тег для ссылок и изображений

Ответить

xenon_9_9 xenon_9_9 09.02.2014 14:42:01

Все отлично работает, но если пустить через эту функцию стрoку, например, такую: "[b][b][b]test[/b][/b][/b]", то всеместо такого: "(жирный)test(жирный)", я получаю такое: "[b][b](жирный)test(жирный)[/b][/b]". Как это можно исправить?

Ответить

alexandrdante alexandrdante 09.02.2014 14:59:15

ну так вы синтаксис нарушили)

Ответить

Web-дизайнер. Web-дизайнер. 24.02.2016 21:50:19

Здравствуйте Михаил! Создал файл с Вашим приведённым кодом парсинга в файл, и подключил его к страничке с примером bb-кода командой <?php require_once ('pars_bb-code.php'); ?> в результате выпадает такое сообщение: Parse error: syntax error, unexpected 'protected' (T_PROTECTED) in E:\OpenServer\domains\home\www\bloks\pars_bb-code.php on line 2 Подскажите, как исправить ошибку?

Ответить

kostya_nad kostya_nad 20.08.2017 19:50:20

А ты его в класс пихнул и вызываешь из класса? Надо либо пихать в класс и из него же вызывать. А если уберешь protected, то вызывай сколько хочешь

Ответить

stroyklimat stroyklimat 19.04.2017 08:56:26

Компания ООО «ЭкоЮгСтройКлимат» http://stroyklimat.ru34.com - продажа, монтаж, ремонт и обслуживание холодильного, климатического, вентиляционного и котельного оборудования в Волгограде, Волгоградской области и регионах РФ. Профессиональное оборудование – очень важный элемент в системе функционирования предприятий общественного питания, торговли, развлекательных центров. Каждая более-менее крупная организация имеет свое штатное профессиональное оборудование. Но если ремонт профессионального оборудования требуется крупному предприятию, для которого от качественной его работы зависит вообще возможность работать, скорость выполнения ремонтных работ становится крайне важной.

Ответить

stroyklimat stroyklimat 19.04.2017 08:56:46

Дейтяльность нашей компании: *продажа торгового холодильного оборудования http://stroyklimat.ru34.com/kypit/kypit-holodilnoe-oborudovanie *обслуживание, ремонт, монтаж торгового холодильного оборудования http://stroyklimat.ru34.com/montazh/montazh-holodilnogo-oborudovaniya *продажа сплит-систем и промышленных систем кондиционирования воздуха. *продажа, обслуживание, ремонт, монтаж систем вентиляции http://stroyklimat.ru34.com/services/montaj_sistem_ventilyatcii *проектирование, поставка, монтаж, обслуживание, ремонт котельных и котельного оборудования http://stroyklimat.ru34.com/services/kotelnie/montaj_kotelnogo_oborudovaniya *проектирование и монтаж металлоконструкций.

Ответить

stroyklimat stroyklimat 19.04.2017 08:56:58

ООО «ЭкоЮгСтройКлимат» готово выполнить любой сложности монтаж и ремонт профессионального оборудования в Волгограде, Волгоградской Области и регионах РФ. Главное, что отличает нашу компанию на рынке – это оперативность выполнения работ. Многолетний накопленный опыт (мы работаем с 2010 года) и собранный штат профессиональных мастеров – профессионалов своего дела, позволяет нам проводить обслуживание профессионального оборудования в кратчайшие сроки. С нами у вас не будет задержек в производстве, а договор на постоянное сотрудничество, заключаемый с нашими заказчиками, стабилизирует отношения и формирует доверие. Более подробную информацию вы можете найти по ссылкам на нашем сайте http://stroyklimat.ru34.com.

Ответить

kostya_nad kostya_nad 20.08.2017 19:51:56

Не пройдет listn. В listn перед закрывающей кавычкой пропущен backslash.

Ответить

gdemebel gdemebel 23.10.2017 22:12:22

Выбираете интернет магазин где недорого купить качественную мебель в г.Волгограде? Онлайн магазин "Где Мебель" в г.Волгограде http://gde-mebel.com/ всегда рад предоставить огромный выбор мебели от ведущих мебельных фабрик РФ и СНГ. Наш интернет магазин готов помочь вам выбрать такую мебель, которая бы идеально дополняла Ваш интерьер и в то же время не тяготила кошелёк. Обширный каталог мебели онлайн интернет-магазина в Волгограде http://gde-mebel.com/catalog/ очень большой. Наш интернет-магазин предлагает много мебели, и предоставляет Вам большой асортимент различной мебели под любые запросы. Онлайн нтернет-магазин «Где Мебель» г.Волгоград всегда готов Вам помочь! Приходите к нам!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.