Jump to content

Expression to replace the class attribute in an image


Recommended Posts

I'm building a wordpress plugin, so I want the user to put an image list, and I later put on a jquery plugin to expect this

<ul>

<li><a><img attr1='val1' class="a"></a></li>

<li><a><img attr1='val1' ></a></li>

</ul>

and matches this structure, if it matched, I would replace the class attribute if it exists with myclassname and if it doesn't it adds it to the img tag

 

consider this input:

<html>
<head><title>Testing RegEx</title>
<style type='text/css'>
.p{
font-color:red;
}
</style>
</head>
<body>
<p> Regex is <b> awesome </b>.peep, creep</p>
<p> Another paragraph
<ul>
<li><a href='#' >dzzd</a></li>
<li><a href='#' ><img alt='dzzd' /></a></li>
<li><a href='#' ><img alt='dzzd' class='omar' /></a></li>
<li><a href='#' ><img alt='dzzd' class='omarr' /></a></li>
</ul>
</p>
<b>aweful</b>
</body>
</html>

 

What I have done so far is the following

$exp="#<ul>.*?(<li>(<a(.*?[^>])>)(?>(.*?)</li>))+.*?</ul>#Uis";
$replaced = preg_replace_callback($exp,addClass,$str);
function addClass($groups){
$patt = '#<img(.*)(?!class)(.*)/>#Uis';
return preg_replace($patt,'<img $2 $3 class="myclassname"',$groups[0]);
}

I'm trying to match anything in the tag that is not class='anything' then match class='anything' then match anything after class='anything'

 

but I can't get it to work,

 

I've read that the negative look-ahead assertions will help, but I'm trying to learn how to use it

so any help will be really appreciated :)

This would be so much simpler if you just did it with jQuery to add the class, or better still just give the <ul> an id and then use

$('#ul_id_here > li > a > img')

to select all of the images in the ul. You can then remove all classes from them, and replace with the ones you want, or just use the selected images directly with that

you are right, and I've been for like 4 days trying to get it to work, but I don't wanna waste all the time, on nothing,

I may do your solution for now, but my solution will be faster since, you don't have to manipulate the html each time it is loaded, you will modify it for once and then it will work normally all the way.

 

 

You could also just remove the class from the images with one regex, then add it to all images with another

This will remove all classes from the img tags

$result = preg_replace('/(<img\b[^>]*) class=\'[^\']+\'([^>]*>)/m', '$1$2', $subject);

 

Then you just replace all images with a class. You will probably need to extend the above a little to have the tags around the img tags too, but that works for removing all image classes

Here is the final code so everyone who come accross this problem benefits from it:

$str = "

<html>
<head><title>Testing RegEx</title>
<style type='text/css'>
.p{
font-color:red;
}
</style>
</head>
<body>
<p> Regex is <b> awesome </b>.peep, creep</p>
<p> Another paragraph
<ul>
<li><a href='#' ><img alt='dzzd' /></a></li>
<li><a href='#' ><img alt='dzzd' class='omar' /></a></li>
<li><a href='#' ><img alt='dzzd' class='omarr' /></a></li>
</ul>
</p>
<b>aweful</b>
</body>
</html>
";
// match the ul that has li>a>img
$exp="#<ul>.*?(<li>(<a(.*?[^>])>)(?>(.*?)</li>))+.*?</ul>#Uis";
$replaced = preg_replace_callback($exp,adjustImages,$str);
// remove the list: ul li
function removeList($groups){
$groups[0] = str_replace(array('<li>','</li>','<ul>','</ul>'),'',$groups[0]);
return $groups[0];
}
// add the desired class to the img tags
function addClass($groups){
return preg_replace('/(<img\b[^>]*) /Uis', '$1 class="thumb" ', $groups[0]);
}
// remove the existing classes
function removeClasses($groups){
return preg_replace('/(<img\b[^>]*) class=\'[^\']+\'([^>]*>)/Uis', '$1$2', $groups[0]);
}
/**
* Remove any classes from img tags, 
* add the desired class to the images
* remove the lists
*/
function adjustImages($groups){

$groups[0] = addClass($groups);
$groups[0] = removeClasses($groups);
$groups[0] = removeList($groups);
return $groups[0];	
}

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.