Trouver des balises HTML img avec les regex dans un texte HTML

**Johann7751** · 16/08/2011, 10h56

Je tiens à préciser que ce sujet est dans le forum PHP/Regex par défaut
En fait je cherche un forum Regex pur.
Je travaille en C# / ASP.NET.
Pouvez vous déplacer le sujet si c'est nécessaire ?

Bonjour

J'ai besoin d'aide ou de renseignements sur la création d'un regex.

Ce que je veux :

Voici ma chaîne de caractères à analyser :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<h4 style="text-align: center"><span style="color: #ff0000"><u><em><strong>Le contenu de l'explication&nbsp; B</strong></em></u></span></h4>
<p>En raison de ....<br />
C'est <strong>pour </strong>cela qu'il faire attention &agrave; <img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif" />&nbsp;<img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/cry_smile.gif" />&nbsp;<img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/thumbs_down.gif" /></p>

Comme vous pouvez le voir, c'est du HTML.
Dans ce HTML, je veux trouver toutes les chaînes correspondant aux balises image.

Donc dans mon regexp, les règles sont :
1) chaîne commençant par "<img".
2) chaîne finissant par "" \>" ou juste "\>" à la limite
3) N'importe quelle chaîne entre les deux (alphanumerique, espace, caractère spéciaux TOUT !!)
A priori, c'est assez simple mais j'y arrive pas.

Là en l’occurrence dans ma chaîne d'exemple, le regex doit trouver 3 résultats.

=> Comment écrire mon regexp ?
=> Pouvez vous m'expliquer comment dans le langage regex, comment on dit n'importe quelle chaîne ? (je sais que le . c'est n'importe quelle caractère, mais comment dis-t-on n'importe quelle chaîne ?)

Merci de votre aide

Invité · 16/08/2011, 11h13

Bonjour,
1/ étant moi-même une bille en regex, je t'invite à faire comme moi et à lire ce tuto : Initiation aux expressions régulières en PHP

2/ que cherches-tu à faire ?
- supprimer les images ? (balises et contenu)
- récupérer tout le contenu des balises ?
- récupérer uniquement les noms des images ?
- autre ... ?

Invité · 16/08/2011, 11h43

Ceci devrait faire l'affaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$subject = '
<h4 style="text-align: center"><span style="color: #ff0000"><u><em><strong>Le contenu de l\'explication&nbsp; B</strong></em></u></span></h4>
<p>En raison de ....<br />C\'est <strong>pour </strong>cela qu\'il faire attention &agrave; <img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif" />&nbsp;
<img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/cry_smile.gif" />&nbsp;<img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/thumbs_down.gif" /></p>
';
 
$pattern  = "#<img(.*)/>#Ui";
    if(preg_match_all($pattern, $subject, $matches))
    {
        echo "Oui :<br /><pre>";
		print_r($matches);
		echo "</pre>";
    }
?>

**Nesmontou** · 16/08/2011, 11h43

Bonjour,

Ne vaudrait-il pas mieux utiliser DOM dans ce cas : http://www.php.net/manual/fr/book.dom.php ?

**Johann7751** · 16/08/2011, 11h45

Mon but est de modifier l'attribut "src" des balises HTML image, afin de les afficher correctement sur mon site de production.

Exemple :

"http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif"

doit devenir :

"http://static.images.monsite.com/content/images/1/Explanations/angry_smile.gif"

Donc plus précisément mon but est :
Trouver toutes les chaînes correspondantes à l'attribut src des balises images.
Le résultat de la recherche dans le texte que j'ai mis en exemple serait donc :

"http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif"
"http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/cry_smile.gif"
"http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/thumbs_down.gif"

Invité · 16/08/2011, 11h58

Envoyé par Johann7751

"http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif"
doit devenir :
"http://static.images.monsite.com/content/images/1/Explanations/angry_smile.gif"

Dans ce cas, il suffit de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php
	$src_avant = 'http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/';
	$src_apres = 'http://static.images.monsite.com/content/images/1/Explanations/';
	$subject2 = str_replace('src="'.$src_avant, 'src="'.$src_apres, $subject);
?>

non ?

**Johann7751** · 16/08/2011, 12h09

Je dois d'abord trouver toutes les chaînes src des balises images puis, oui, après je fais un Replace.
Mais en fait mon but de ce sujet c'est vraiment de trouver le pattern du regex qui me permet de trouver ce que j'ai énoncé.
Indépendamment du langage de programmation, juste le pattern.

(Tu m'écris du code en PHP, je suis une bille dans ce langage, je code en C# / ASP.NET)

Invité · 16/08/2011, 12h25

#<img(.*)/>#Ui

explication :
# -> (délimiteurs) début et fin de regex
<img -> commence par ...
(.*) -> n'importe quel caracteres ...
/> -> finit par ...
U -> (modificateur) "Ungreedy", c'est-à-dire non gourmand. Cela signifie que l'expression trouvera des résultats aussi petits que possible.
i -> (modificateur) Permet de ne pas tenir compte de la casse

**Benjamin Delespierre** · 16/08/2011, 13h04

Hello

Avec DOMDocument comme l'a mentionné @Nesmontou:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$doc = new DOMDocument;
$doc->loadHTMLFile('/chemin/vers/ton/html');
 
$list = $doc->getElementsByTagName('img');
foreach ($list as $node) {
  if ($node->hasAttribute('src') {
     $src = $node->getAttribute('src');
     $filename = basename($src);
     $node->setAttribute('src', 'http://static.images.monsite.com/content/images/1/Explanations/' . $filename);
  }
}
 
echo $doc->saveHTML();

Arrêtez de parser du HTML avec des REGEXP, c'est beaucoup plus simple avec le DOM

**Johann7751** · 16/08/2011, 14h27

Merci pour les explications du pattern regex :
"#<img(.*)/>#Ui"
Malheureusement, il ne fonctionne pas.

Voici le code C# pour info :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
                string regexPattern = "#<img(.*)/>#Ui";
                Regex myRegex = new Regex(regexPattern);
                MatchCollection mc = myRegex.Matches(myText);

J'ai rien dans mon objet mc de type MatchCollection
Je vais essayer la piste du DOMDocument, voir si il existe une classe de ce type en C#..

**Shikiryu** · 16/08/2011, 14h30

Envoyé par Nesmontou

Ne vaudrait-il pas mieux utiliser DOM dans ce cas : http://www.php.net/manual/fr/book.dom.php ?

Envoyé par Benjamin Delespierre

Arrêtez de parser du HTML avec des REGEXP, c'est beaucoup plus simple avec le DOM

J'aurais dit la même chose s'il développait en PHP

Par contre, je suis presque persuadé qu'il existe des parseurs de HTML en C# / ASP.NET ...

**DotNetMatt** · 16/08/2011, 15h06

Envoyé par Shikiryu

Par contre, je suis presque persuadé qu'il existe des parseurs de HTML en C# / ASP.NET ...

Effectivement, il existe le très bon HtmlAgilityPack.

**Nathanael Marchand** · 16/08/2011, 15h24

Comme précisé dans mon autre post, je pense que le problème vient du fait de travailler avec des urls absolues plutôt que des relatives. Néanmoins, la réponse est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(?<pre><img.*?src=".*?://)(?<host>.*?)(?<post>/.*?".*?/>)

Ce qui avec une expression de remplacement comme celle ci ${pre}bouh${post} transforme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<h4 style="text-align: center"><span style="color: #ff0000"><u><em><strong>Le contenu de l'explication&nbsp; B</strong></em></u></span></h4>
<p>En raison de ....<br />C'est <strong>pour </strong>cela qu'il faire attention &agrave; <img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif" />&nbsp;<img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/cry_smile.gif" />&nbsp;<img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/thumbs_down.gif" /></p>

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<h4 style="text-align: center"><span style="color: #ff0000"><u><em><strong>Le contenu de l'explication&nbsp; B</strong></em></u></span></h4>
<p>En raison de ....<br />C'est <strong>pour </strong>cela qu'il faire attention &agrave; <img alt="" src="http://bouh/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif" />&nbsp;<img alt="" src="http://bouh/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/cry_smile.gif" />&nbsp;<img alt="" src="http://bouh/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/thumbs_down.gif" /></p>

**Immobilis** · 16/08/2011, 16h44

Envoyé par Nathanael Marchand

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(?<pre><img.*?src=".*?://)(?<host>.*?)(?<post>/.*?".*?/>)

Est-ce que cela marche en multilignes? Si il y a un retour à la ligne entre deux attributs le tag ne match pas on dirait.

Je propose aussi ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

src\s*=\s*"(?<url>([\w:\/+-.%]*(gif|jpg|png)))

Testé ici: http://regexhero.net/tester/
avec

<h4 style="text-align: center">Le contenu de l'explication  B</h4>
En raison de .... 
C'est pour cela qu'il faire attention à
<img alt="" src="http://www.localhost:2302/angry_sm-ile.png" /> <img alt=""
src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/cry_smile.jpg" /> 
<img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/thumbs_down.gif" />

A+

EDIT ou encore plus simple à tester:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

src\s*=\s*"(?<url>(.*(gif|jpg|png)))

**Nathanael Marchand** · 16/08/2011, 16h56

Envoyé par Immobilis

Est-ce que cela marche en multilignes? Si il y a un retour à la ligne entre deux attributs le tag ne match pas on dirait.

Ca marche avec une déclaration comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var regex = new Regex("(?<pre><img.*?src=\".*?://)(?<host>.*?)(?<post>/.*?\".*?/>)", RegexOptions.Singleline);

**Immobilis** · 16/08/2011, 17h13

Envoyé par Nathanael Marchand

Ca marche avec une déclaration comme ceci:

**Johann7751** · 18/08/2011, 11h55

Premièrement merci pour toutes les réponses, et merci pour m'avoir fait connaître le site regexhero !

J'avais fini par trouver écrire un regex dont le pattern est :
<img([a-zA-Z0-9_.:\\/ ="[\]-]*)>
=> Il va trouver toutes les balises images de mon texte.
La plupart des regex que vous me proposez fonctionnent également (j'ai beaucoup du mal à les déchiffrer par contre

)

Notamment celui là qui trouve les balises images :
(?<pre><img.*?src=".*?://)(?<host>.*?)(?<post>/.*?".*?/>)

et celui-ci qui trouve les balises sources :
src\s*=\s*"(?<url>([\w:\/+-.%]*(gif|jpg|png)))

Notamment, dans ces pattern, je connais pas la signification des termes entre chevrons dans les regex (<url>, <host>, <post>, <pre> notamment..)
C'est quoi ça du regex avancé ? Ce sont des mots clés du regex

Et est ce qu'il est possible de construire un regex qui sélectionne seulement les balises "src "(et leur contenu), seulement les balises "src" contenues dans les balises images ?

**Nathanael Marchand** · 18/08/2011, 12h07

Envoyé par Johann7751

Notamment, dans ces pattern, je connais pas la signification des termes entre chevrons dans les regex (<url>, <host>, <post>, <pre> notamment..)
C'est quoi ça du regex avancé ? Ce sont des mots clés du regex

Ce sont des groupes de capture nommés: comme tu peux le voir dans mon expression qui fait le remplacement, au lieu de manipuler des ${1} et des ${2} je manipule des ${host}, ${pre}, ${post}. Pareil quand je fais un Regex.Match, je peux accéder via le nom du groupe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var regex = new Regex("bl(?<test>.*)");
 
var match = regex.Match("bla");
var toto = match.Groups["test"].Value; // plutot que match.Groups[1].Value

Envoyé par Johann7751

Et est ce qu'il est possible de construire un regex qui sélectionne seulement les balises "src "(et leur contenu), seulement les balises "src" contenues dans les balises images ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(?<pre><img.*?)(?<src>src=".*?")(?<post>.*?/>)

Néanmoins, ca ne change pas le fait qu'il est déconseillé de bosser avec des urls absolues :p

**Johann7751** · 18/08/2011, 17h18

Merci pour l'explication.
Tu m'as fait découvrir la notion de groupe dans les regex.
C'est puissant.

**Johann7751** · 24/08/2011, 11h36

Dans la continuité de ce sujet donc j'ai mon regex qui me trouve le contenu de l'attribut "src" des balises images.

Le pattern dans regexhero :
<img([a-zA-Z0-9_.:\\/ ="[\]-]*)src="(?<src>[a-zA-Z0-9_.:\\/ ="[\]-]*)"([a-zA-Z0-9_.:\\/ ="[\]-]*) />

Le pattern dans mon code :
(différent de celui d'au dessus car je suis obligé d'échapper les guillemets par exemple)

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

string pattern = "<img([a-zA-Z0-9_.:\\/ =\"[\\]-]*)src=\"(?<src>[a-zA-Z0-9_.:\\/ =\"[\\]-]*)\"([a-zA-Z0-9_.:\\/ =\"[\\]-]*) />"

Explications :
=> Le Regex me trouve les balises images.
=> je peux accéder, à l'intérieur de chaque balise image, au contenu de l'attribut "src" grâce à mon groupe ?<src>.

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
                string pattern = "<img([a-zA-Z0-9_.:\\/ =\"[\\]-]*)src=\"(?<src>[a-zA-Z0-9_.:\\/ =\"[\\]-]*)\"([a-zA-Z0-9_.:\\/ =\"[\\]-]*) />";
                Regex a_regex = new Regex(pattern);
                string input = "bla bla ...";
                MatchCollection mc = a_regex.Matches(input);
                foreach (Match m in mc)
                {
                    string contentAttributeSrc = m.Groups["src"].Value;
                }

Donc j'aimerais utiliser la méthode Replace du Regex pour :
Remplacer le groupe ?<src> de tous mes matchs par une chaîne de caractère.

Mon problème est que je veux remplacer seulement le groupe ?<src> dans la chaine matchée et non pas toute la chaîne matchée.
Comment faire ?

Je suis en train de chercher je pense pouvoir m'en sortir avec la surcharge de Replace utilisant un delegué MatchEvaluator..

Trouver des balises HTML img avec les regex dans un texte HTML

ASP.NET

Discussions similaires

Partager

Partager