Ajouter un lien autour des balises img avec regexp

Question

Je voudrais ajouter des liens autour des balises d'image avec preg_replace().

Avant:

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

Après:

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

J'apprécierais beaucoup d'aide. Merci beaucoup.

Answer 1

Cela aiderait-il?

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

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

Aussi, preg_replace_callback vous donne une grande puissance en termes de détermination dynamique le contenu réel de la balise <a>.

EDIT: Pour protéger contre le défaut @Amber a souligné, ce modèle devrait aider:

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

YMMV avec qui, en fonction de l'uniformité de vos <img> tags. Est-alt toujours présent et le dernier attribut, avec des espaces simples autour etc.

EDIT: Re: copier le src de img un est href:

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

Et encore .. ce s'attend à l'uniformité de vos img étiquettes originales . Si elles sont créées par vous, vous pouvez être bon tel quel. Sinon, vous voudrez protéger contre les attributs manquants, l'ordre variable, les guillemets doubles ou simples, etc.

Answer 2

Il semble que vous essayez de donner une version "plus grande" d'une image après un clic. Si c'est le cas j'irais avec javascript. Dans ce scénario, le lien n'est pas pertinent pour le contenu et la fonctionnalité du site et ne sert qu'à améliorer l'expérience de l'utilisateur, de sorte qu'il s'intègre très bien au type javascript enrichir l'expérience utilisateur.

Un exemple jQuery serait plus ou moins comme ceci (notez que j'ai ajouté la classe peut-clic pour mieux contrôler quelle image vous avez cliqué):

$(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... 
     }); 

    }); 
}); 

Ce code n'a pas été testé.

J'espère que ça aide!