Доброго времени суток!
В данной публикации хочу рассказать и расскажу о том, как генерировать оглавление текста на PHP. Почему хаб «Laravel»? Данное решение вылилось в пакет, который можно просто подключить через composer.
Я кодочтец! Если нужен код, он тут. Итоговое решение вылилось в пакет для Laravel.
Сидим значит с пацанами кодим... Работая над интересным проектом, от заказчика приходит задача «Ребята, надо для определенного вида статей генерировать оглавление налету». Прилетела эта задача в меня, в прошлом году. Как, чем это реализовывать было непонятно и неизвестно. Один известный поисковик результатов, которые бы мне подошли, по данной теме не выдавал. Надо было решение придумывать самому. И один известный портал с готовыми решениями тоже мне не помог.
Сел я, бахнул пару литров тёмного... Собрался я с мыслью что да как делать и принялся кодить. Сначала всё казалось просто: в тексте есть заголовки разного уровня (теги h1-h6), по ним и надо строить оглавление. Ну, думаю, сейчас буду парсить текст по шаблону и всё это дело в массив. Во время работы посетила меня муза и начался диалог:
— кодер, а что ты будешь делать, если заголовки не будут в строгом порядке?
— что? как это?
— представь, идёт h1, потом в тексте h2, h3, опять h2, h1, h2, h3, h4. Это строгий порядок, т.к. заголовки нижнего уровня идут строго за родителем. А теперь представь, что после h2 идёт по тексту не h3, а h4 или h6! И после h6 h4 и так далее, как эквалайзер.
Вот тут я и покрылся холодным потом. «Ну», — думаю, «этого не может быть». Решил уточнить у заказчика и таки да! Такое возможно!..
Нахреначился я в гов... Выпив чашку чая, пораскинув мозгами, я решил, что уже массивом не отделаешься, т.к. мне надо знать когда родитель открывать и закрывать. А массив либо он есть, либо его нет и определить куда именно мне надо сохранить очередной заголовок невозможно. Т.к. все эти дела происходят на API, на SPA соответственно каждый уровень заголовка должен быть на своём расстоянии от левого края. К тому же, надо хранить еще сам заголовок и ссылку на него. Ссылка формируется из самого заголовка и должна быть якорем, чтобы кликнул и попал в нужную часть текста.
Не тяжело, а интересно... Именно так я себе и подумал, а еще подумал, что открывать и закрывать родителя и дочерние элементы я могу сам, собирая данные в JSON.
Первая строка кода такая:
$description = preg_replace("/<(p|[hH](10|[1-9]))>(<[hH](10|[1-9]).*?>(.*?)</[hH](10|[1-9])>)</(p|[hH](10|[1-9]))>/", "$3", $description);
Она не сразу выбилась в лидеры, а появилась после того, как добавилось требование, что должна быть возможность вставлять заголовки h7-h10, которых в wysiwyg редакторе не было. Для этого была создана своя магия, в результате которой мы получили ситуацию, когда тег заголовка мог быть обрамлён абзацем. Вот данная строка и убирает этот самый абзац (тег p).
Дальше мы собираем в массив все заголовки, которые есть в тексте в массив $items
preg_match_all("/<[hH](10|[1-9]).*?>(.*?)</[hH](10|[1-9])>/", $description, $items);И дальше начинается карусель. Сначала мне надо открыть всё моё оглавление:
$menu = "{";
Затем по заголовкам запускается большой цикл, внутрь которого мы и будем нырять:
for ($i = 0; $i < count($items[0]); $i++) {...}
В первую очередь необходимо получить текст заголовка, очистив его от тегов и прочей шелухи. Функция replaceH1Symbols производит замену некоторых html-сущностей на специальные символы (например < превращается в «). В свойстве stripTags хранится вот такая регулярка
/</?[^>]+>|&[a-z]+;|'|"/ $name = preg_replace($this->stripTags, "", trim(html_entity_decode($this->replaceH1Symbols($items[2][$i]), ENT_QUOTES)));
После того, как имя получено сформируем ссылку для него:
$link = preg_replace($this->symbols, "", strtolower($name));
$link = preg_replace($this->spaces, "-", $link);
, где в свойстве symbols хранятся все символы-врединки (кавычки, скобки, апострофы, знаки препинания и т.п.), а в spaces всё, как может выглядеть пробел, ведь его в ссылке быть не должно.
Итак, ссылка есть. Дальше надо проверить, а есть ли такая ссылка уже в тексте. Ведь по тексту могут встречаться одинаковые заголовки. Если такая ссылка есть и, возможно она не одна, то нашей новой ссылке надо приписать её порядковый номер
$repeatCount = count(array_keys($usedItem, $name));
if ($repeatCount > 0) {
$link .= "-" . ($repeatCount + 1);
}
Убейте меня! Начинаем формировать наше оглавление. Сначала проверяем начало ли у нас цикла или нет
if ($i == 0) {
$menu .= '"' . $i . '": {';
$menu .= '"title": "' . $name . '",';
$menu .= '"link": "' . $link . '"';
}
Если начало, то всё хорошо, а если нет? Проверяем на то, является ли уровень текущего заголовка больше предыдущего (например, предыдущий h2, а текущий h4). Возможно, данная формулировка не совсем корректна, но большеменьше я пишу, отталкиваясь от цифры возле h.
elseif ($i != 0 && $items[1][$i] > $items[1][$i - 1]) {
Если да, то нам необходимо посчитать какая разница между этими заголовками
$quantity = $items[1][$i] - $items[1][$i - 1];
и открыть дочернее подменю
$menu .= ', "subItems": {';
Затем мы записываем какого уровня у нас наш предыдущий заголовок, т.к. если его порядок меньше (2<4), то он родитель нашего текущего заголовка
array_push($parentItem, (int)$items[1][$i - 1]);
И записываем общее количество внутренних элементов
$subItemsCount += $quantity;
Затем запускаем цикл вложенности этих самых внутренних элементов, которых нет.
for ($j = 1; $j <= $quantity - 1; $j++) {
$menu .= """ . $j . "":{";
$menu .= '"subItems": {';
array_push($parentItem, $items[1][$i - 1] + $j);
}
И после этого наконец-то вставляем наш заголовок
$menu .= '"' . $i . '": {';
$menu .= '"title": "' . $name . '",';
$menu .= '"link": "' . $link . '"';
}
Как бы мне это развидеть? Дальше рассматриваем ситуацию наоборот, когда текущий заголовок меньше предыдущего. Например, h2 идёт после h4.
elseif ($i != 0 && $items[1][$i] < $items[1][$i - 1]) {
Затем мы высчитываем разницу между заголовками и при наличии subItemsCount нам надо закрыть все внутренние элементы, которые были открыты раннее. Спрашиваете, почему я умножаю на 2? Верьте, просто верьте. Это магия, у которой раньше было объяснение, но сейчас оно покрыто мифами о парности открывающихсязакрывающихся фигурных скобочек.
$quantity = $items[1][$i - 1] - $items[1][$i];
$menu .= "}";
if ($subItemsCount) {
for ($j = 1; $j <= $quantity * 2; $j++) {
$menu .= "}";
if ($j % 2 == 0) {
$subItemsCount--;
array_pop($parentItem);
}
}
}
И вставляем наш текущий заголовок
$menu .= ', "' . $i . '": {';
$menu .= '"title": "' . $name . '",';
$menu .= '"link": "' . $link . '"';
}
Эй, парень, ты наркоман? Последняя проверка — равен ли уровень текущего заголовка предыдущему. Например, был h2 и опять h2. Здесь всё просто: закрыть предыдущий элемент и вставить текущий
else {
$menu .= '}, "' . $i . '": {';
$menu .= '"title": "' . $name . '",';
$menu .= '"link": "' . $link . '"';
}
Обещать, не значит жениться... Обманул, не последняя. Последняя проверка на то, является ли текущий заголовок последним или нет. Ведь если да, нам надо закрыть все открытые до него уровни.
if (!array_key_exists($i + 1, $items[1])) {
$a = $items[1][$i];
$lastParent = array_shift($parentItem);
if ($lastParent && $lastParent < $a) {
for ($q = 0; $q <= ($a - $lastParent) * 2; $q++) {
$menu .= "}";
}
} else {
$menu .= "}";
}
}
И не забыть имя положить в массив используемых имён
$usedItem[] = $name;
Вот и сказочке конец Осталось только вне цикла закрыть наше оглавление
$menu .= "}";
Всё. Оглавление готово к употреблению. Осталось только в тексте проставить якоря на самих заголовках.
Шта? Данный JSON на выходе из API декодируется и SPA получает объект.
Я читал, я молодец? Спасибо, что уделили внимание и надеюсь, что публикация окажется полезной. Любые советы, критику принимаю 247. Удачного всем кодинга и не только!
Автор: Андрей Луцкевич
