Is it possible to use a dot in a classname inside Jquery?
$('.B.Avf').toggle();
I need to keep the dot in: B.Avf classname.
Can i somehow escape it?
Is this possible?
UPDATE
I tried to escape it with "\" with no success.
You can always just use the [attr="val"] selector for this.
$('[class*="B.Avf"]')
The *= means "class contains...". Since this is looking at the attribute directly and there could be more than one class, you don't want to use =.
There are two ways to select elements that have special selection characters in their identifiers. As Tushar mentioned in a comment, you can use a double backslash (\\) to escape the special character in query (including both jQuery and document.querySelector), or you can use an attribute selector, as Rocket Hazmat pointed out.
Note that in CSS (that is, an actual stylesheet, not JavaScript), the selector is slightly different. You only need a single backslash to escape the special characters.
Demo below:
// use a double backslash to escape characters in JavaScript query selectors
document.querySelector(".a\\.b").style.backgroundColor = "blue";
//or use an attribute selector!
document.querySelector('[class="a.b"]').style.color = "white";
/* Use a single backslash to escape characters in CSS */
.a\.b{border:1px solid black;}
<div class="a.b">My class name is a.b</div>
Related
when using the special character to find the element like as below $("#search#") the exception will occur. how to resolve it?
I've tried using the all special character but it's working with * character like $("#search*") without any error, but others #$%^&() throw an error.So why it accepts the * character but why the other character doesn't.
If you have special character for ids, you should escape them using \\ (two backslashes) when you access them. But as far as I know this will only be allowed with html5.
As stated in jquery selector documentation
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \. For example, an element with
id="foo.bar", can use the selector $("#foo\.bar").
alert($("#search\\$").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="search$">Heh</div>
Try utilizing Attribute Equals Selector [name="value"]
$("[id='search#']").click(function() {
$(this).html(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="search#">click</div>
Many special characters are not allowed (Which characters are valid in CSS class names/selectors?).
A way to still select what you want, by looking for all but the special character(s) be seeing what some at the start, end, or contained somewhere within the tag's id.
Starts with: jQuery ID starts with
$('[id^="start-with"]')
Ends with: jQuery Selector: Id Ends With?
$('[id$="ending-part"]')
Contained somewhere within: jQuery ID Contains
$('[id*="any-spot-at-all"]')
There are others ways to "skin the cat" of course - some other selector options for example, to find only a part of a id or class or any other HTML tag attribute can be found at http://api.jquery.com/category/selectors/attribute-selectors/ .
Is there a way I can use a selector for a name attribute that has [] at the end? The below code won't work, is there an alternative?
$("[name=some_attribute[]]")
Use ' to wrap the name:
$("[name='text[]']");
Demo
Try before buy
Yes, you can escape with backslashes. So:
$("[name=some_attribute\\[\\]]")
Note that since I'm writing the backslash in a string literal, I have to escape it (with another backslash).
You can also use quotes around the value:
$("[name='some_attribute[]']")
// or
$('[name="some_attribute[]"]')
These are both actually CSS things rather than jQuery things: The value used in an attribute selector must be a CSS identifier or a string.
Working DEMO
Guess this is what you need
$("*[name$='\\[\\]']")
OR
$("[name$='\\[\\]']")
OR
$("[name$='[]']")
Hope this helps, Thank you
In Javascript, I have a CSS selectors and I would like to extract the rules:
var cssOriginalString = 'p:hover { color: red; font-weight: bold;}';
var cssFinalString = 'color: red; font-weight: bold;';
My goal is to group all the rules inside an array:
var rulesArray = ['color: red;', 'font-weight: bold;'];
Any idea?
-- appcropolis
You could try using regex:
[a-z-]+ *:[^:;]+;
The [a-z-]+ matches the css attribute names. I'm pretty sure they're lower case letters and hyphens, based on W3schools CSS attributes reference. However you could modify this if you feel differently (allow capital letters, etc). The loosest possible regex I'd recommend would be [\w-]+, which allows letters, numbers, underscore, and hyphen.
The *: is the separating colon, spaces allowed around it.
The [^:;]+; is the attribute value followed by a semi-colon. I've said that the attribute value can't contain a colon : or semi-colon ; to prevent it from matching across multiple attributes. You could also try .*?; here (the ? is important to make the match non-greedy, so it doesn't match over multiple attributes).
Your question seems to be asking for a regular expression, but it is very general. I need to know a lot more about the input string (for example, can you have two rulesets on the same line? Can you have one ruleset on multiple lines? Is it possible or a concern for "}" to appear in a rule? What about # queries?). A very simplistic expression for a single ruleset on a single line:
cssOriginalString.replace(/.*{([^}]+)}/, '$1');
<script type="text/javascript">
var haystackText = document.getElementById("navigation").innerHTML;
var matchText = 'Subscribe to RSS';
var replacementText = '<ul><li>Some Other Thing Here</li></ul>';
var replaced = haystackText.replace(matchText, replacementText);
document.getElementById("navigation").innerHTML = replaced;
</script>
I'm attempting to try and replace a string of HTML code to be something else. I cannot edit the code directly, so I'm using Javascript to alter the code.
If I use the above method Matching Text on a regular string, such as just 'Subscribe to RSS', I can replace it fine. However, once I try to replace an HTML string, the code 'fails'.
Also, what if the HTML I wish to replace contains line breaks? How would I search for that?
<ul><li>\n</li></ul>
??
What should I be using or doing instead of this? Or am I just missing a small step? I did search around here, but maybe my keywords for the search weren't optimal to find a result that fit my situation...
Edit: Gonna mention, I'm writing this script in the footer of my page, well after the text I wish to replace, so it's not an issue of the script being written before what I want to overwrite to appear. :)
Currently you are using String.replace(substring, replacement) that will search for an exact match of the substring and replace it with the replacement e.g.
"Hello world".replace("world", "Kojichan") => "Hello Kojichan"
The problem with exact matches is that it doesn't allow anything else but exact matches.
To solve the problem, you'll have to start to use regular expressions. When using regular expression you have to be aware of
special characters such as ?, /, and \ that need to escaped \?, \/, \\
multiline mode /regexp/m
global matching if you want to replace more than one instance of the expression /regexp/g
closures for allowing multiple instances of white space \s+ for [1..n] white-space characters and \s* for [0..n] white-space characters.
To use regular expression instead of substring matching you just need to change String.replace("substring", "replacement") to String.replace(/regexp/, "replacement") e.g.
"Hello world".replace(/world/, "Kojichan") => "Hello Kojichan"
From MDN:
Note: If a <div>, <span>, or <noembed> node has a child text node that
includes the characters (&), (<), or (>), innerHTML returns these
characters as &, < and > respectively. Use element.textContent
to get a correct copy of these text nodes' contents.
So since textContent (or innerText) won't get you the HTML, you'd have to modify your search string appropriately.
You can use Regular Expressions.
Recommend to use Regular Expression. Notice that ? and / are special characters in Regular Expression. And for global multi-line matching, you need g and m flags set in the regular expression.
Regular expression matching of HTML (other than plain text) that comes out of a web page is a bad idea and is troublesome to make work cross browser (particularly in IE). The HTML that comes out of a web page does not always look the same as what was put in because some browser reconstitute the HTML and don't actually store what went in. Attributes can change order, quote marks can change or disappear, entities can change, etc...
If you want to modify whole tags, then you should directly access the DOM and operate on the actual objects in the page.
There exist other ways of linking to JS, apart from this (the usual)..
<script src="myscript.js" type="text/javascript"></script>
...that utilize other quote types:
<script src="myscript.js" type="text/javascript"></script>
Are these widely supported in modern browsers, and older browsers in use, such as IE6? Basically is it safe to use this method, just as you would use the regular double-quote method?
Edit: The HTML4 spec seems to allow it, but is it well supported in practical reality?
3.2.2 Attributes
Authors may also use numeric character references to represent
double quotes (") and single quotes (').
For double quotes authors can also use the
character entity reference ".
Using " instead of " is simply wrong, it doesn't have the same meaning within the SGML and XML specifications. Argument values of elements should use either single (') or double quotes ("). In the old SGML specification this element
<foo bar="quux" />
could be read as an element with the name foo, and attribute named bar with the value "quux". However, the standard defines that unquoted attribute values should not include escaped characters. And this element
<foo bar="quux" />
should be read as an element with the name foo, and attribute named bar with the value quux without the quotes. This is because in SGML the quotes are optional, and everything up to the next space will be used as the value for the attribute.
XML requires quotes.
There is a difference between an attribute value delimiter and a quote or double quote character.
You have to use a literal " or ' to delimit attribute values (except where delimiters are optional). In this case, the squence of bytes means "attribute value delimited" not "(double) quote mark"
The character references can be used to represent a (double) quote mark but is a more complicated and inefficient way compared to using a literal so should only be used when the literal is not available (i.e. when it would be an attribute value delimiter because you are inside an an attribute value where the opening delimiter was that character).
Just out of curiosity. Why would you want to use the encoded variants? In most of the text editors it will break the formatting. For me that would be very annoying.
You should stick with the double quotes - othewise the attribute might not be correctly read.
<script src=myscript.js></script>
is valid in HTML5 and supported by every significant browser.