💡 Приклади використання

Реальні сценарії та рішення для роботи з HTML Tag Cleaner

📚 Зміст

Видалення кольорів після імпорту
Очистка після Word/Excel
Міграція зі старої версії
Видалення конкретних стилів
Часткова очистка форматування
Робота з вкладеними тегами
Очистка конкретних таблиць
Складні комбінації

1. Видалення кольорів після імпорту

Проблема

Після імпорту товарів з CSV/Excel в описах з'явились небажані кольорові теги:

До:

<p><span style="color: #000000">Опис товару</span></p>
<p><span style="color: rgb(255,0,0)">Акційна ціна!</span></p>
<p><span style="background-color: yellow">Увага!</span></p>

Рішення

Варіант 1: Видалити ВСІ span з кольорами

Теги: span[style*="color"]

Результат:

<p>Опис товару</p>
<p>Акційна ціна!</p>
<p>Увага!</p>

Варіант 2: Видалити тільки чорний колір

Теги: span[style*="color: #000000"]

Результат:

<p>Опис товару</p>
<p><span style="color: rgb(255,0,0)">Акційна ціна!</span></p>
<p><span style="background-color: yellow">Увага!</span></p>

Варіант 3: Видалити тільки текстовий колір (залишити background)

Теги: span[style*="color:"], span[style*="color :"]

Покрокова інструкція

Відкрийте скрипт у браузері
Натисніть кнопку "🎨 Кольорові span" (готовий шаблон)
Або введіть вручну: span[style*="color"]
Сканування покаже скільки знайдено
Перегляньте приклади змін
Запустіть очистку

2. Очистка після Word/Excel

Проблема

При копіюванні контенту з Microsoft Word вставляється купа зайвих тегів:

До:

<p class="MsoNormal">
    <span style="font-family: Calibri; font-size: 11pt">
        <strong>Заголовок</strong>
    </span>
</p>
<p class="MsoNormal">
    <span class="mso-bidi-font-weight: bold">Звичайний текст</span>
</p>
<font face="Arial" size="2" color="#000000">Старий стиль</font>

Рішення

Повна очистка:

Теги: span, font, strong, em, b, i, u

Результат:

<p class="MsoNormal">Заголовок</p>
<p class="MsoNormal">Звичайний текст</p>
Старий стиль

Часткова очистка (залишити strong та em):

Теги: span, font

Результат:

<p class="MsoNormal"><strong>Заголовок</strong></p>
<p class="MsoNormal">Звичайний текст</p>
Старий стиль

Додаткова очистка класів (потребує SQL)

Після видалення тегів можна прибрати класи MsoNormal:

UPDATE oc_product_description 
SET description = REPLACE(description, ' class="MsoNormal"', '');

3. Міграція зі старої версії

Проблема

Магазин перенесено з OpenCart 1.5 де використовувались застарілі HTML теги:

До:

<font color="red" size="3" face="Arial">
    <b>Акція!</b>
</font>
<center>
    <font size="2">Текст по центру</font>
</center>

Рішення

Крок 1: Видалити font теги

Теги: font

Результат після кроку 1:

<b>Акція!</b>
<center>Текст по центру</center>

Крок 2: Видалити center та інші застарілі теги

Теги: center, b, i, u

Фінальний результат:

Акція!
Текст по центру

Альтернатива: Все за один раз

Теги: font, center, b, i, u, strike, s

4. Видалення конкретних стилів

Проблема

Потрібно видалити тільки певні стилі, залишивши інші:

До:

<span style="color: red; font-size: 14px;">Червоний текст</span>
<span style="font-size: 16px; font-weight: bold;">Великий жирний</span>
<span style="text-decoration: underline;">Підкреслений</span>
<span style="background: yellow;">Жовтий фон</span>

Рішення 1: Видалити тільки підкреслення

Теги: span[style*="text-decoration"]

Результат:

<span style="color: red; font-size: 14px;">Червоний текст</span>
<span style="font-size: 16px; font-weight: bold;">Великий жирний</span>
Підкреслений
<span style="background: yellow;">Жовтий фон</span>

Рішення 2: Видалити кольори та фони

Теги: span[style*="color"], span[style*="background"]

Результат:

Червоний текст
<span style="font-size: 16px; font-weight: bold;">Великий жирний</span>
<span style="text-decoration: underline;">Підкреслений</span>
Жовтий фон

Рішення 3: Залишити тільки розмір шрифту

Теги: span[style*="color"], span[style*="background"], span[style*="text-decoration"], span[style*="font-weight"]

Результат:

Червоний текст
<span style="font-size: 16px;">Великий жирний</span>
Підкреслений
Жовтий фон

5. Часткова очистка форматування

Проблема

Є описи з різним форматуванням, потрібно залишити тільки заголовки:

До:

<h2>Характеристики</h2>
<p>
    <strong>Важливо:</strong> 
    <span style="color: red">Акція</span> 
    діє до <em>кінця місяця</em>
</p>
<ul>
    <li><b>Пункт 1</b></li>
    <li><i>Пункт 2</i></li>
</ul>

Рішення: Видалити форматування, залишити структуру

Теги: span, strong, em, b, i, u, font

Результат:

<h2>Характеристики</h2>
<p>Важливо: Акція діє до кінця місяця</p>
<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
</ul>

Що залишилось:

✅ h2 (заголовки)
✅ p (параграфи)
✅ ul, li (списки)

Що видалено:

❌ span, strong, em, b, i (форматування)

6. Робота з вкладеними тегами

Проблема

Складна структура з багатьма вкладеними тегами:

До:

<span style="color: blue">
    <span style="font-size: 14px">
        <strong>
            <em>Текст з багатьма тегами</em>
        </strong>
    </span>
</span>

Рішення: Видалити все форматування

Теги: span, strong, em

Після першого проходу:

<span style="color: blue">
    <span style="font-size: 14px">
        Текст з багатьма тегами
    </span>
</span>

Після другого проходу:

<span style="color: blue">Текст з багатьма тегами</span>

Після третього проходу:

Текст з багатьма тегами

Порада

Скрипт автоматично робить до 10 проходів. Якщо теги дуже глибоко вкладені - просто запустіть очистку повторно.

7. Очистка конкретних таблиць

Проблема

Потрібно очистити тільки описи товарів, не чіпаючи категорії та інші таблиці.

Рішення: Використати вибіркове очищення

Крок 1: Запустіть сканування

Теги: span[style*="color"]

Крок 2: У результатах зніміть галочки

Знайдено таблиці:

☑️ oc_product_description ← залишити
☐ oc_category_description ← зняти галочку
☐ oc_information_description ← зняти галочку
☐ oc_attribute_description ← зняти галочку

Крок 3: Запустіть очистку

Буде оброблена тільки таблиця з товарами.

Варіант 2: Обробка у кілька етапів

Етап 1: Товари

Сканування
Вибір тільки oc_product_description
Очистка

Етап 2: Категорії

Сканування
Вибір тільки oc_category_description
Очистка

Переваги:

Більший контроль
Можна перевірити результат на кожному етапі
Менше навантаження на сервер

8. Складні комбінації

Приклад 1: E-commerce описи після імпорту з AliExpress

До:

<p>
    <span style="font-family: Arial;">
        <span style="color: #ff0000; font-size: 14px;">
            <strong>HOT SALE!</strong>
        </span>
    </span>
</p>
<p><font color="black" face="Verdana" size="2">Product description</font></p>

Рішення:

Теги: span, font, strong

Результат:

<p>HOT SALE!</p>
<p>Product description</p>

Приклад 2: Очистка після копіювання з сайту постачальника

До:

<div class="product-desc">
    <h3><span style="color: #333;">Опис</span></h3>
    <p>
        Товар високої якості. 
        <span style="color: red; font-weight: bold;">Акція!</span>
        Знижка <strong style="color: green;">30%</strong>
    </p>
</div>

Рішення 1: Зберегти структуру, видалити стилі

Теги: span

Результат 1:

<div class="product-desc">
    <h3>Опис</h3>
    <p>
        Товар високої якості. 
        Акція!
        Знижка <strong style="color: green;">30%</strong>
    </p>
</div>

Рішення 2: Повна очистка

Теги: span, strong

Результат 2:

<div class="product-desc">
    <h3>Опис</h3>
    <p>Товар високої якості. Акція! Знижка 30%</p>
</div>

Приклад 3: Видалення тільки inline стилів, збереження тегів

Ситуація: Потрібно залишити <strong> та <em>, але видалити їх inline стилі.

До:

<p>
    <strong style="color: red;">Важливо!</strong>
    <em style="font-size: 12px;">Примітка</em>
</p>

Примітка: Скрипт видаляє теги повністю. Для видалення тільки атрибутів потрібен окремий SQL запит:

-- Видалити style з strong
UPDATE oc_product_description 
SET description = REGEXP_REPLACE(
    description, 
    '<strong[^>]*style="[^"]*"([^>]*)>', 
    '<strong\\1>'
);

-- Видалити style з em
UPDATE oc_product_description 
SET description = REGEXP_REPLACE(
    description, 
    '<em[^>]*style="[^"]*"([^>]*)>', 
    '<em\\1>'
);

📊 Статистика реальних кейсів

Кейс 1: Магазин відеоігор (5000 товарів)

Проблема: Після імпорту з постачальника кольорові span
Рішення: span[style*="color"]
Результат: 
  - Знайдено: 4,523 записи
  - Оброблено: 4,523 записи
  - Час: 12.4 сек
  - Розмір БД: -2.1 MB

Кейс 2: Книжковий магазин (15000 товарів)

Проблема: Старі font теги з OpenCart 1.5
Рішення: font, center, b, i
Результат:
  - Знайдено: 12,847 записів
  - Оброблено: 12,847 записів
  - Час: 38.6 сек
  - Розмір БД: -5.7 MB

Кейс 3: Електроніка (2000 товарів)

Проблема: Копіювання описів з Word
Рішення: span, font, strong, em
Результат:
  - Знайдено: 1,876 записів
  - Оброблено: 1,876 записів
  - Час: 5.2 сек
  - Розмір БД: -1.3 MB

🎓 Навчальні приклади

Для початківців

Приклад 1: Видалити тільки один конкретний тег

Завдання: Видалити всі <u> (підкреслення)
Рішення: u
Очікуваний результат: Текст без підкреслення

Приклад 2: Видалити два різні теги

Завдання: Видалити <b> та <i>
Рішення: b, i
Очікуваний результат: Текст без жирного та курсиву

Для просунутих

Приклад 3: Використання wildcard

Завдання: Видалити span тільки з атрибутом class
Рішення: span[class*=""]
Примітка: Знайде будь-який span що має class

Приклад 4: Комбінація умов

Завдання: Видалити червоні та сині span
Рішення: span[style*="color: red"], span[style*="color: blue"]

💼 Професійні сценарії

Сценарій 1: Підготовка до SEO оптимізації

Мета: Очистити описи від зайвого HTML для кращої індексації

Етапи:

Видалити форматування: span, font, strong, em, b, i, u
Залишити структуру: h2, h3, p, ul, li
Перевірити результат на фронтенді
Додати правильну розмітку вручну

Сценарій 2: Міграція між платформами

OpenCart → Shopify:

Експорт товарів з OpenCart
Очистка HTML: span, font, div[class*=""]
Конвертація до Markdown (окремий скрипт)
Імпорт у Shopify

Сценарій 3: Масове оновлення контенту

Задача: Змінити стиль 10000 описів

Підхід:

Очистити старі стилі: span[style*=""]
Додати нові класи через SQL
Оновити CSS на сайті

🔧 Поради та трюки

Порада 1: Тестуйте на малій вибірці

Створіть тестову таблицю:

CREATE TABLE oc_product_description_test 
SELECT * FROM oc_product_description LIMIT 100;

Модифікуйте скрипт для роботи з тестовою таблицею, перевірте результат.

Порада 2: Логуйте зміни

Додайте перед очисткою:

CREATE TABLE cleanup_log AS
SELECT product_id, description, NOW() as cleaned_at
FROM oc_product_description
WHERE description LIKE '%<span%';

Тепер можна порівняти "до" та "після".

Порада 3: Робіть паузи між великими операціями

Для 50000+ записів:

Обробіть 10000
Зачекайте 5 хвилин
Наступні 10000
І так далі

Порада 4: Використовуйте diff для перевірки

# Експорт до очистки
mysqldump database oc_product_description > before.sql

# Очистка

# Експорт після
mysqldump database oc_product_description > after.sql

# Порівняння
diff before.sql after.sql > changes.txt

📞 Потрібна допомога?

Якщо ваш кейс не описаний тут:

Створіть Issue на GitHub
Опишіть вашу ситуацію
Додайте приклад HTML до/після
Вкажіть що ви вже пробували

Маєте цікавий кейс? Поділіться з нами! 🚀

← Назад до README | Українською →

FilesExpand file tree

EXAMPLES.md

Latest commit

History

EXAMPLES.md

File metadata and controls

💡 Приклади використання

📚 Зміст

1. Видалення кольорів після імпорту

Проблема

Рішення

Покрокова інструкція

2. Очистка після Word/Excel

Проблема

Рішення

Додаткова очистка класів (потребує SQL)

3. Міграція зі старої версії

Проблема

Рішення

Альтернатива: Все за один раз

4. Видалення конкретних стилів

Проблема

Рішення 1: Видалити тільки підкреслення

Рішення 2: Видалити кольори та фони

Рішення 3: Залишити тільки розмір шрифту

5. Часткова очистка форматування

Проблема

Рішення: Видалити форматування, залишити структуру

6. Робота з вкладеними тегами

Проблема

Рішення: Видалити все форматування

Порада

7. Очистка конкретних таблиць

Проблема

Рішення: Використати вибіркове очищення

Варіант 2: Обробка у кілька етапів

8. Складні комбінації

Приклад 1: E-commerce описи після імпорту з AliExpress

Приклад 2: Очистка після копіювання з сайту постачальника

Приклад 3: Видалення тільки inline стилів, збереження тегів

📊 Статистика реальних кейсів

Кейс 1: Магазин відеоігор (5000 товарів)

Кейс 2: Книжковий магазин (15000 товарів)

Кейс 3: Електроніка (2000 товарів)

🎓 Навчальні приклади

Для початківців

Для просунутих

💼 Професійні сценарії

Сценарій 1: Підготовка до SEO оптимізації

Сценарій 2: Міграція між платформами

Сценарій 3: Масове оновлення контенту

🔧 Поради та трюки

Порада 1: Тестуйте на малій вибірці

Порада 2: Логуйте зміни

Порада 3: Робіть паузи між великими операціями

Порада 4: Використовуйте diff для перевірки

📞 Потрібна допомога?