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

Version imprimable

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:

1 2 3 <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://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/angry_smile.gif" /> <img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/cry_smile.gif" /> <img alt="" src="http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/thumbs_down.gif" />
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

16/08/2011, 10h13
Invité

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 ... ?

Ceci devrait faire l'affaire :

Code:

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>";
    }
?>

16/08/2011, 10h43
Nesmontou

Bonjour,

Ne vaudrait-il pas mieux utiliser DOM dans ce cas : http://www.php.net/manual/fr/book.dom.php ?
16/08/2011, 10h45
Johann7751

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"

Citation:

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:

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 ?

16/08/2011, 11h09
Johann7751

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)
16/08/2011, 11h25
Invité

Citation:

#<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

Hello

Avec DOMDocument comme l'a mentionné @Nesmontou:

Code:

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 ;)

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

Voici le code C# pour info :
Code:

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#..
16/08/2011, 13h30
Shikiryu

Citation:

Envoyé par Nesmontou

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

Citation:

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 ... :mouarf:
16/08/2011, 14h06
DotNetMatt

Citation:

Envoyé par Shikiryu

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

Effectivement, il existe le très bon HtmlAgilityPack.

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:

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

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

Code:

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>

Code:

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>

16/08/2011, 15h44
Immobilis

Citation:

Envoyé par Nathanael Marchand

Code:

(?<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:

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

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

Citation:

<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:

src\s*=\s*"(?<url>(.*(gif|jpg|png)))
16/08/2011, 15h56
Nathanael Marchand

Citation:

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:

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

Citation:

Envoyé par Nathanael Marchand

Ca marche avec une déclaration comme ceci:

:ccool:
18/08/2011, 10h55
Johann7751

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 8O)

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 ?
18/08/2011, 11h07
Nathanael Marchand
Citation:

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:

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
Citation:

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:

(?<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
18/08/2011, 16h18
Johann7751

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

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:

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:

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..

J'avais fait un truc dans le genre ya qqs temps.
J'ai pas lu attentivement le topic donc je ne sais pas si ton besoin est exactement le même
Mais voilà mon code

Je récupère le code html rendu dans htmlRender et j'appelle la méthode ReplaceImgSrc avec htmlRender en paramètre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
private void ReplaceImgSrc(string content)
        {
            string pattern = "<img\\s+[^>]*?src\\s*=\\s*(?:(?:\"(?<url>[^\"]*)\")|(?<url>[^>]*))";
            var r = new Regex(pattern, (RegexOptions.IgnoreCase | RegexOptions.Compiled));
            MatchCollection results;
            results = r.Matches(content);
            foreach (Match mat in results)
            {
                Group g = mat.Groups[1];
                CaptureCollection cc = g.Captures;
                foreach (Capture c in cc)
                {
                    ParseSrc(c.Value);
                }
            }
        }

private void ParseSrc(string value)
        {
            if (value.Contains("TempImages"))
            {
                htmlRender = htmlRender.Replace(value, string.Format("http://{0}{1}", HttpContext.Current.Server.MachineName.ToLower(), value));
            }
 
        }

J'ai trouvé comment faire.

1) J'ai nommé 3 groupes dans le pattern de mon regex :
- le 1er groupe correspond à ce qu'il y a avant le contenu de ma balise src.
ex : <img alt="" src="
- le 2ème groupe correspond au contenu de la balise src.
ex : http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/envelope.gif
- le 3ème groupe correspond à ce qu'il y a après la contenu de la balise src.
ex : " />

2) Il faut utiliser cette surcharge de la fonction Replace :
Regex.Replace (String, MatchEvaluator)
Code:

1 2 3 4 string pattern = "(?<beforeSrcContent><img([a-zA-Z0-9_.:\\/ =\"[\\]-]*)src=\")(?<srcContent>[a-zA-Z0-9_.:\\/ =\"[\\]-]*)(?<afterSrcContent>\"([a-zA-Z0-9_.:\\/ =\"[\\]-]*) />)"; string input = "bla bla ...."; Regex a_regex = new Regex(pattern); input = a_regex.Replace(input, new MatchEvaluator(this.ReplaceSrcAttributeContent));
Le code de la fonction déléguée :
Code:

1 2 3 4 5 6 7 8 9 public string ReplaceSrcAttributeContent(Match m) { string before = m.Groups["beforeSrcContent"].Value; string contentAttributeSrc = m.Groups["srcContent"].Value; string after = m.Groups["afterSrcContent"].Value; string nameFile = contentAttributeSrc.Split('/').Last(); string contentAttributeSrcReplacement = "|ExplImgPath|" + nameFile; return before + contentAttributeSrcReplacement + after; }

Oulala non, c'est un bazooka pour tuer une mouche! (Et en plus ta regex est fausse, si src n'est pas le dernier attribut de image, ca plante)
Regarde mon premier message! J'avais précisé un truc comme ceci:

Code:

${pre}bouh${post}

Ben pour ton cas c'est exactement la même chose:
Code:

1 2 3 4 var pattern = @"(?<beforeSrcContent><img[a-zA-Z0-9_.:\/ =""[\]-]*src="")(?<srcContentPath>[a-zA-Z0-9_.:\/ =[\]-]*/)(?<srcContentFile>[a-zA-Z0-9_.:\/ =[\]-]*)(?<afterSrcContent>""[a-zA-Z0-9_.:\/ =""[\]-]*/>)"; var input = @"<img alt="""" src=""http://localhost:2302/WebSiteCarblocksUpdator/fckeditor/editor/images/smiley/msn/envelope.gif"" bla="""" />"; var replacement = @"${beforeSrcContent}http://monserveuramoi/monadresse/${srcContentFile}${afterSrcContent}"; var output = Regex.Replace(input, pattern, replacement);

Fuseau horaire GMT +2. Il est actuellement 18h20.