Escaping special characters in symfony css selector or using wildcard - css

I am using the Symfony\Component\DomCrawler\Crawler package to find a form with a name containing a number of css special chars
<input name="myfield[0].thing">
I am using
$messageElement = $crawler->filter('input[name=myField[0].thing]');
return $messageElement->attr($attribute);
But I get the error
Symfony\Component\CssSelector\Exception\SyntaxErrorException: Expected "]", but found.
Obviously this is because the symfony css selector is using [ ] to contain the attributes. So If I try an escape all the special chars
$crawler->filter('input[name=myField\[0\]\.thing]');
I now get empty output. How can I fix this?
Bonus question: is it possible to use a wildcard instead? * doesn't seem to work for me.

If you encapsulate the field name it should work, try this:
$messageElement = $crawler->filter('input[name="myField[0].thing"]');
return $messageElement->attr($attribute);.
For the bonus question, you can use a regex match similar to suggested here: wildcard * in CSS for classes
// For matching strings starting with a certain thing notice the ^=
$messageElement = $crawler->filter('input[name^="myField[0]"]');
// For matching strings containing with a certain thing notice the *=
$messageElement = $crawler->filter('input[name*="myField[0]"]');

Related

Scss classnames with special symbols like "[]"

This is a strange question. I request link type from server which might return "[TCP]" or "[UDP]". And I wanna use the string as classname directly for different background color like. What I want is :
<div className={`${styles.span} ${styles["[TCP]"]}`}/>
But the css selector ".[TCP]" is not allowed, below error given:
SassError: Invalid CSS after "&": expected selector, was ".[TCP]"
Now I am using .replace(/\[|\]/g,"") split the string "[TCP]" --> "TCP". But I hope someone can tell me another way or it's impossible.
"You can use [TCP] as classname."
As written here (demo) you can use any character for classname except NULL. All you have to do is in CSS write \ before special characters. In your case, it would look like this .\[TCP\].
But I believe it's much easier to just remove the special characters.

Why we need to escape CSS?

Given the following examples which I picked up from here:
CSS.escape(".foo#bar") // "\.foo\#bar"
CSS.escape("()[]{}") // "\(\)\[\]\{\}"
Since .foo#bar is a valid CSS selector expression. Why we need to append \ before some characters? Suppose I want to write my own program which does the same task of escaping all the values/expressions in a CSS file then, how should I proceed?
PS: I am always confused about the escaping, how should I think when it comes to escaping some input?
You escape strings only when those strings contain special symbols that you want to be treated literally. If you are expecting a valid CSS selector as user input, you shouldn't be escaping anything.
.foo#bar is a valid CSS selector, but it means something completely different from \.foo\#bar. The former matches an element with that respective class and ID, e.g. <div class=foo id=bar> in HTML. The latter matches an element with the element name ".foo#bar", which in a hypothetical markup language could be represented as <.foo#bar> (obviously this is not legal HTML or XML syntax, but you get the picture).

Using xpath to match a string that contains any integer (between 0 and 9)

I am new to XPath and need some help.
The system auto generates the id which looks something like this:
<input type="file" class="form-file" size="22"
name="files[entry-23245_field_entry_attachment_und_0]"
id="edit-entry-23245-field-entry-attachment-und-0-upload"
style="background-color: transparent;">
I am able to locate the id using xpath or css however the numbers within the id string changes as this is randomly generated so the next time my test runs, it fails because it cant locate the string.
I would like to know if it is at all possible to write an xpath expression that will look for everything from the start of the string edit-entry- then some how look for any integer value between 0-9 within that string -23245-, then also match the end part field-entry-attachment-und-0-upload. this way when my test runs, it is able to locate the element all the time even if the numbers within the string change. iv tried adding \d+ to my xpath but it doesn't seem to pick it up.
This is the xpath:
//*[#id="edit-entry-23245-field-entry-attachment-und-0-upload"]
That is because your Xpath isn't extracting the right attribute. Use an Xpath like this to get the id of the element:
//input[#type="file" and #class="form-file"]/#id
This Regex should extract the value you are looking for:
/edit-entry-\d+-field-entry-attachment-und-0-upload/
If \d+ doesn't work for you this is another possibility:
/edit-entry-[0-9]+-field-entry-attachment-und-0-upload/
Just an idea for workaround, since we can't use regex in pure XPath.
In case you just need to match <input> element with id equals "edit-entry-[arbitrary-characters-here]-field-entry-attachment-und-0-upload", we can use starts-with() and ends-with() functions like this :
//*
[starts-with(#id, "edit-entry-")
and
ends-with(#id, "-field-entry-attachment-und-0-upload")]
and in case you're using XPath 1.0 where ends-with() function is not available :
//*
[starts-with(#id, "edit-entry-")
and
(
"-field-entry-attachment-und-0-upload"
=
substring(#id, string-length(#id) - string-length("-field-entry-attachment-und-0-upload") +1)
)
]

ASP.NET Routing Regex to match specific pattern

I am trying to write a regular expression for ASP.NET MapPageRoute that matches a specific type of path.
I do not want to match anything with a file extension so I used this regex ^[^.]*$ which worked fine except it also picked up if the default document was requested. I do not want it to pick up the default document so I have been trying to change it to require at least one character. I tried adding .{1,} or .+ to the beginning of the working regex but it stopped working alltogether.
routes.MapPageRoute("content", "{*contentpath}", "~/Content.aspx", true, new RouteValueDictionary { }, new RouteValueDictionary { { "contentpath", #"^[^.]*$" } });
How can I change my regex to accomplish this?
Unfortunately my brain does not seem capable of learning regular expressions properly.
You want to change your * quantifier to +. * matches zero or more times, whereas + matches one or more. So, what you are asking for is this:
^[^.]+$
The regex is accomplishing this: "At the beginning of the string, match all characters that are not ., at least one time, up to the end of the string."
^[^.]+$
zero is to * as one is to +

How do I match individual CSS attributes using RegEx

I'm trying to expand a minified CSS file (don't ask) to make it human readable.
I've managed to get most of the expanding done but I'm stuck at a very weird case that I can't figure out.
I have CSS that looks like this:
.innerRight {
border:0;color:#000;width:auto;padding-top:0;margin:0;
}
a {
color:#000;text-decoration:underline;font-size:12px;
}
p,small,ul,li {
color:#000;font-size:12px;padding:0;
}
I've tried (.+):(.+); as the search and \t\1: \2;\n as the replace. The find RegEx is valid, the only problem is that it matches the entire line of attributes. I've tried the non-greedy character, but I must not be putting it in the right place.
What the above find RegEx matches is:
0: border:0;color:#000;width:auto;padding-top:0;margin:0;
1: color:#000;text-decoration:underline;font-size:12px;
2: color:#000;font-size:12px;padding:0;
While those are technically correct matches, I need it to match border:0;, color:#000;, etc separately for my replace to work.
Try this - use non-greedy matching. This works for me
(.+?):(.+?);
Forget the colon. Just replace all semicolons with ";\n".
In Javascript, for example, you could write:
text = text.replace(/;/gm,";\n");
I would further refine that to address leading-space issues, etc., but this will put every style rule on its own line.

Resources