PHP Regex for CSS Selector

JAB Creations · #1 05-13-2008, 09:23 PM

I'm trying to match CSS selectors (not including the curly brackets {}).

Here are a couple attempts thus far though unsuccessfully...

PHP Code:


			
/([0-9a-z]).|,([0-9a-z])/

PHP Code:


			
/[0-9a-z](.|,)[0-9a-z]/

Here are some sample CSS selector strings that I desire a working regex to match in example...

Code:

body

h1

h1, h2, h3, h4

div

div.border

a:hover

a:link

a:focus

Suggestions please?

Master_script_maker · #2 05-13-2008, 09:31 PM

try this:

PHP Code:


			
/[0-9a-z]((.|,|:)[0-9a-z]){0,10}/

JAB Creations · #3 05-13-2008, 09:35 PM

Cool thanks, that seems to work fine as far as I can tell.

I forgot to also mention I'd like to match if the string is empty and I'm not seeing anything in regards to 'empty' on any of the reference sites.

Master_script_maker · #4 05-13-2008, 09:43 PM

you would like to detect if something is empty? what do you mean exactly/do you have any examples of what you want?

JAB Creations · #5 05-13-2008, 09:45 PM

Here is an example of what I mean by 'empty'...
<input value="" />

...so I'd also like to match empty selectors.

Master_script_maker · #6 05-13-2008, 09:57 PM

to match an empty string you would use:

PHP Code:


			
/^$/

to match an empty string or the selector:

PHP Code:


			
/^([0-9a-z]((.|,|:)[0-9a-z]){0,10}|)$/

JAB Creations · #7 05-13-2008, 10:23 PM

That didn't match? I've begun to grasp regex to some extent though the things I just tried made me realize there is plenty of logic I'm missing thus far.

Here is the full file I'm using to test regex filters that is making it very easy for me to test the regex filters out...

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>PHP Serverside Validation of CSS post data</title>
<style type="text/css">
body,html {font-family: monospace;}
b {color: #00f;}
b.bad {color: #f00;}
b.good {color: #0f0;}
div {outline: #f00 solid 1px;}
div.overflow {float: left; font-size: 12px; height: 240px; margin: 4px; overflow: auto; width: 25%;}
form {float: left; width: 400px;}
form input {font-size: 10px; width: 60px;}
</style>
</head>
<body>

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<fieldset>
<div>
<input name="ce000" value="body" />
<input name="ce001" value="444" />
<input name="ce002" value="11/002" />
<input name="ce003" value="00f" />
<input name="ce004" value="00f" />
</div>
<div>
<input name="ce010" value="h2, h2, h3, h4" />
<input name="ce011" value="transparent" />
<input name="ce012" value="none" />
<input name="ce013" value="1f1" />
<input name="ce014" value="115" />
</div>
<div>
<input name="ce020" value="div" />
<input name="ce021" value="55555" />
<input name="ce022" value="01/002" />
<input name="ce023" value="5f6" />
<input name="ce024" value="5f6" />
</div>
<div>
<input name="ce030" value="span" />
<input name="ce031" value="7d6" />
<input name="ce032" value="" />
<input name="ce033" value="" />
<input name="ce034" value="" />
</div>
<div>
<input name="ce040" value="" />
<input name="ce041" value="" />
<input name="ce042" value="" />
<input name="ce043" value="" />
<input name="ce044" value="" />
</div>
<div>
<input name="ce050" value="" />
<input name="ce051" value="" />
<input name="ce052" value="" />
<input name="ce053" value="" />
<input name="ce054" value="" />
</div>
<div>
<input name="ce060" value="" />
<input name="ce061" value="" />
<input name="ce062" value="" />
<input name="ce063" value="" />
<input name="ce064" value="" />
</div>
<div>
<input name="ce070" value="" />
<input name="ce071" value="" />
<input name="ce072" value="" />
<input name="ce073" value="" />
<input name="ce074" value="" />
</div>
<div>
<input name="ce080" value="" />
<input name="ce081" value="" />
<input name="ce082" value="" />
<input name="ce083" value="" />
<input name="ce084" value="" />
</div>
<br style="clear: both;" />
<input style="display: block; width: 60%;" type="submit" value="Validate Form Data" />
</fieldset>
</form>

<?php
function validate_clientside_array($regex, $position)
{
$item = '/'.$position.'$/';
 echo 'parameter 1 = <b>'.$regex.'</b><br />';
 echo 'parameter 3 = <b>'.$position.'</b><br /><br />';

  foreach($_POST as $key => $value)
  if (preg_match($item, $key))
  {
  if ($validity != '1')
   {
   if (preg_match($regex, $value)) {echo ' <b class="good">'.$key.' = '.$value.'</b> is a <b class="good">match</b>!</b><br />'."\n";}
   else {echo '<b class="bad">'.$key.' == '.$value.'</b> not a <b class="bad">match</b>!</b><br />'; $validity = '1';}
   /*return false;*/
  }
 }
}

$regex_0_selectors = '/[0-9a-z]((.|,|:)[0-9a-z]){0,10}/'; //'/[0-9a-z]((.|,|:)[0-9a-z]){0,10}/';
$regex_1_colors    = '/^(?:(?:[0-9a-f]{3}){1,2}|transparent)?$/';
$regex_2_bgimages  = '/^(([0-9]{2})\/([0-9]{3})|none)?$/';

echo '<div class="overflow"><h3>Column 0 - Selectors</h3>';
validate_clientside_array($regex_0_selectors,'0');
echo '</div>';

echo '<div class="overflow"><h3>Column 2 - Background-images</h3>';
validate_clientside_array($regex_2_bgimages,'2');
echo '</div><br style="clear: both;" />';

echo '<div class="overflow"><h3>Column 1 - Hex Colors</h3>';
validate_clientside_array($regex_1_colors,'1');
echo '</div>';

echo '<div class="overflow"><h3>Column 3 - Hex Colors</h3>';
validate_clientside_array($regex_1_colors,'3');
echo '</div>';

echo '<div class="overflow"><h3>Column 4 - Hex Colors</h3>';
validate_clientside_array($regex_1_colors,'4');
echo '</div><br style="clear: both;" />';

echo $validity.' <b><--- (if you don\'t see \'hi mom\' to the left of the arrow then script will falsely proclaim validation, DOH!)</b>';

if (isset($validity)) {echo '<br />The array <b class="bad">contains invalid data</b>!';}
else {echo '<br />The array contains <b class="good">only valid data</b>.';}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$comma_separated = implode("?", $_POST);
echo '<p><b>Imploded Post Data:</b> '.$comma_separated.'</p>'."\n";
}
?>
<div>
<p>Valid data includes 'transparent', short-hand hexidecimal (fff, 0ff, 123, etc), and regular hexidecimal values.</p>

<p>Any other data <b><i>should</i></b> trigger an error and in which case all the form data should be rejected as a whole!</p>

</div>
</body>
</html>

boogyman · #8 05-14-2008, 01:46 PM

Quote:

Originally Posted by Master_script_maker

to match an empty string you would use:

PHP Code:


			
/^$/

to match an empty string or the selector:

PHP Code:


			
/^([0-9a-z]((.|,|:)[0-9a-z]){0,10}|)$/

why not just wrap the whole thing and use a question mark (exists 1 or zero times).. you also should allow for uppercase characters

Code:

/^([0-9A-z]([#|.|,|:][0-9A-z]){0,10})?$/

/ starts the reg ex
^([0-9A-z] stats the values must start with any lowercase / uppercase letter or a digit
([#|.|,|:] states next must come either a number sign (id), a dot (class), comma (additional style), or a full colon (pseudo class)
[0-9A-z]) stats the declaration of css style type must be followed by at any digit or lowercase/uppercase letter
){0,10} stats this occurance of the value may exist anywhere in the inclusive range of 0 - 10 times. but not more
)? stats this value may never exist to begin with
$ stats this value must not contain any other characters
ends the regular expression

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

The Following User Says Thank You to Master_script_maker For This Useful Post:
JAB Creations (05-13-2008)