Добавить ссылку вокруг тегов img с помощью регулярного выражения

Question

Я хотел бы добавить ссылки вокруг тегов изображений с помощью preg_replace ().

До:

<img href="" src="" alt="" />

После того, как:

<a href="" ..><img href="" src="" alt="" /></a>

Буду очень признателен за любую помощь. Большое спасибо.

Answer 1

Поможет ли это?

$str = '<img href="" src="" alt="" />';

preg_replace('/(<img[^>]+>)/', '<a href="" ...>$1</a>', $str));

Кроме того, preg_replace_callback дает вам большие возможности в плане динамического определения фактического содержимого тега <a>.

РЕДАКТИРОВАТЬ: Чтобы защитить от недостатка @Amber указал, этот шаблон должен помочь:

'#(<img[^>]+ alt="[^"]*" />)#'

YMMV с этим, в зависимости от однородности ваших <img> тегов. Всегда присутствует alt и последний атрибут, с одним пробелом вокруг и т. Д.

РЕДАКТИРОВАТЬ: Re: копирование src img в Href:

preg_replace('#(<img[^>]+ src="([^"]*)" alt="[^"]*" />)#', '<a href="$2" ...>$1</a>', $str)

И снова .. это ожидание единообразия от ваших оригинальных тегов img. Если они созданы вами, вы можете быть хорошими, как есть. Если нет, то вы хотите защитить от пропущенных атрибутов, различного порядка, двойных и одинарных кавычек и т. Д.

Answer 2

Похоже, вы пытаетесь дать «большую» версию изображения при нажатии. Если это так, я бы пошел с JavaScript.

В этом сценарии ссылка не имеет отношения к содержанию и функциональности сайта и служит только для улучшения взаимодействия с пользователем, поэтому она очень хорошо подходит для типа javascript «расширение возможностей пользователя».

Пример jQuery будет более или менее похож на это (обратите внимание, что я добавил класс can-click, чтобы лучше контролировать, какое изображение вы хотите щелкнуть):

$(function(){
    // get all images that have 'can-click' class
    $('img.can-click').each(function(){
        // adds the custom cursor pointer to give the user clicking feedback
        $(this).css('cursor', 'pointer');

        // your clicking handle goes here
        $(this).click(function(){
            // you can set up the image on a light-box, to a new tab, etc...
        });

    });
});

Этот код не был проверен.

Надеюсь, это поможет!