Как быстро заменить текст на теги <img> в Sublime Text
Опубликовано:
Иногда на сайте или в HTML-файле уже есть заготовленный контент, например подписи вида:
<p>Image 1</p>
<p>Image 2</p>
...
<p>Image 27</p>
И возникает задача быстро заменить эти подписи на реальные изображения, например:
<img src="images/1.jpg">
<img src="images/2.jpg">
...
<img src="images/27.jpg">
Делать это вручную долго и неудобно. В этой статье разберём самый быстрый и безопасный способ сделать такую замену с помощью Sublime Text и регулярных выражений.
Что нам понадобится
- Редактор Sublime Text
- HTML-файл с однотипными строками
- 1 минута времени
Никаких плагинов и скриптов устанавливать не нужно.
Шаг 1. Открываем поиск и замену
Откройте HTML-файл в Sublime Text и нажмите:
- Ctrl + H (Windows / Linux)
- Cmd + Alt + F (macOS)
Откроется панель поиска и замены:
Обязательно включите режим Regular Expression - кнопка .* слева.
Шаг 2. Шаблон для поиска
В поле Find вставьте:
<p>Image (\d+)</p>
Что здесь происходит:
<p>Image - ищем начало строки
(\d+) - находим число (1, 2, 10, 27 и т.д.) и запоминаем его
</p> - конец тега
Число внутри скобок сохраняется как группа захвата.
Шаг 3. Шаблон для замены
В поле Replace вставьте:
<img src="images/\1.jpg">
Почему используется \1
- \1 - это ссылка на первую захваченную группу из поиска
- На её место подставляется найденное число
Примеры:
- Image 1 → images/1.jpg
- Image 12 → images/12.jpg
- Image 27 → images/27.jpg
Шаг 4. Заменяем всё сразу
Нажмите кнопку Replace All.
Sublime Text автоматически заменит все совпадения во всём файле.
Результат
Было:
<p>Image 1</p>
<p>Image 2</p>
<p>Image 3</p>
Стало:
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
Быстро, аккуратно и без ручной правки.
Полезные советы
- Перед массовой заменой можно нажать Find All, чтобы убедиться, что шаблон совпадает только с нужными строками
- Если изображения лежат в другой папке - просто измените путь images/
- Таким же способом можно менять не только <p>, но и любые повторяющиеся HTML-блоки
Итог
Sublime Text с регулярными выражениями позволяет:
- автоматизировать рутинные правки
- избежать ошибок при ручном редактировании
- работать быстрее даже с большими HTML-файлами
Если вы часто редактируете HTML вручную - этот приём стоит взять на вооружение.
Если вам понравилась статья, то поделитесь ею в социальных сетях:
Комментарии и вопросы
Если у вас возникли вопросы по установке или настройке - задавайте их в комментариях ниже