I am in the need of defining html classes from content, so pretty much every char could be used. According to html reference I may use cdata, so I should not run into problems. I figure though, that css and/or javascript/jquery won't play nicely with that.
Anyone has experience with what chars can be used without problems or if there is a function/plugin/.. that tidies the class names, so that they are usable?
css classnames must be the usual identifiers (http://www.w3.org/TR/CSS21/syndata.html#characters)
In CSS 2.1, identifiers (including
element names, classes, and IDs in
selectors) can contain only the
characters [A-Za-z0-9] and ISO 10646
characters U+00A1 and higher, plus the
hyphen (-) and the underscore (_);
they cannot start with a digit.
Javascript doesn't mind, since you will use classnames as Strings. So you can use any character as far as javascript is concerned.
If you want to strip your classnames down to the usable css subset, a simple regexp should be enough. If you want to encode your classnames into the same subset, it will be a little tougher, but I suppose you can try to Base64-encode them. Here are some jQuery plugins for base64 encoding/decoding.
As far as the class attribute is concerned you will run into problems using chars other than [a-z], [A-Z] and [_-].
For arbitrary data I would recommend the (upcoming with HTML5) data-x attribute.
See http://ejohn.org/blog/html-5-data-attributes/ for an example.
Cheers
Related
I'm trying to find a perfect RegExp to find React components with specific properties on them. The RegExp has to be used in the search field of my IDE VSCode.
Component example: <Button>
Property example: size
Component on a single line
In case the opening tag of the component is on one single line, the RegExp I found that works perfectly is this (flags are not allowed in VSCode):
/<Button.+size/
For example this will be matched until the end of size:
<Button onClick={()=>{}} size='medium'>
Component on multi-line
Sometimes the component has so many props that the company code style would want it to split it on several lines, 1 property per line, like this:
<Button
type="button"
size="tiny"
className={styles.pauseButton}
onClick={togglePaused}
title="Pause or enable automatic loading of webhook requests in the debug console."
>
I can't manage to write a RegExp to match these particular cases:
Is there a single RegExp working for both cases (and not matching anything else)?
In case one single RegExp doesn't exists for both cases, is there a RegExp to match only multi-line components with a specific prop in between its opening/closing bracket?
What I've tried
I've tried with /<Button[\s\S]*?size[\s\S]*?>/ but it overmatches cases where there is a without a size property, so it will keep matching until it find a size word somewhere.
At the moment I'm using /<Button[\n]/ which matches ALL and ONLY the split components, and then I have to manual check if they have the specific property on them. I'd still prefer a RegExp that match the split with the specific property only.
I also found this nice answer too, but it breaks if the components has other properties that have a > inside, like arrow functions and components as props. This could be a good base to start from tho. The RegExp answered is:
<Component(\s|\n)[^>]*?property
Probably it's something with lookaheads, but I'm not experienced enough...
Thanks
I just explored the great UTF-8 character \u200b, which tells Browsers where it can break a word, if it doesn't fit it's parent container:
MySuperLongWordThat\u200bWontFitItsParentContainer
will be displayed as
MySuperLongWordThat
WontFitItsParentContainer
Is there any way to tell the Browser to automatically replace \u200b with a hyphen - in case the word will break?
I thought about replacing it manually with JavaScript, but I do not know any event that will fire when the word breaks.
That's not what zero-width space is intended for.
The CSS hyphens property can be used to help, but you'll notice from that documentation that if you want to manually insert word-wrap points then you should use - the "soft-hyphen".
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
When to Use Double or Single Quotes in JavaScript
Difference between single quotes and double quotes in Javascript
When I started learning jQuery, I frequently found examples using single quote or double quote as jQuery selector:
$('#myDiv'); or $("#myDiv");
They are basically the same. But which one is used prefer and fast execute please let me know.
You'll want to use single quotes where you want double quotes to appear inside the string (e.g. for html attributes) without having to escape them, or vice-versa. Other than that, there is no difference, performance vise also both are same.
There's no performance difference. They mean the same thing. I usually use singles for property names and other short literals, and doubles for long text that the user will see. The exception of course, is when one of the two appears inside the string, then use the other.
Personally I use double quotes when working with strings (= more than one char) and single quotes when working with chars (= one char) although there is no difference in Javascript. There's also no "hidden" feature in double quotes like there is in php.
jQuery code style mandates the use of double-quotes, but there's no diference in usage.
Double quotes are typed faster =)
How long is too long for an attribute value in HTML?
I'm using HTML5 style data attributes (data-foo="bar") in a new application, and in one place it would be really handy to store a fair whack of data (upwards of 100 characters). While I suspect that this amount is fine, it raises the question of how much is too much?
HTML5 has no limits on the length of attribute values.
As the spec says, "This version of HTML thus returns to a non-SGML basis."
Later on, when describing how to parse HTML5, the following passage appears (emphasis added):
The algorithm described below places
no limit on the depth of the DOM tree
generated, or on the length of tag
names, attribute names, attribute
values, text nodes, etc. While
implementors are encouraged to avoid
arbitrary limits, it is recognized
that practical concerns will likely
force user agents to impose nesting
depth constraints.
Therefore, (theoretically) there is no limit to the length/size of HTML5 attributes.
See revision history for original answer covering HTML4.
I've just written a test (Note! see update below) which puts a string of length 10 million into an attribute and then retrieves it again, and it works fine (Firefox 3.5.2 & Internet Explorer 7)
50 million makes the browser hang with the "This script is taking a long time to complete" message.
Update: I've fixed the script: it previously set the innerHTML to a long string and now it's setting a data attribute. https://output.jsbin.com/wikulamuni It works for me with a length of 100 million. YMMV.
el.setAttribute('data-test', <<a really long string>>)
I really don't think there is any limit. I know now you can do
<a onclick=" //...insert 100KB of javascript code here">
and it works fine. Albeit a little unreadable.
From HTML5 syntax doc
9.1.2.3 Attributes
Attributes for an element are
expressed inside the element's start
tag.
Attributes have a name and a value.
Attribute names must consist of one or
more characters other than the space
characters, U+0000 NULL, U+0022
QUOTATION MARK ("), U+0027 APOSTROPHE
('), U+003E GREATER-THAN SIGN (>),
U+002F SOLIDUS (/), and U+003D EQUALS
SIGN (=) characters, the control
characters, and any characters that
are not defined by Unicode. In the
HTML syntax, attribute names may be
written with any mix of lower- and
uppercase letters that are an ASCII
case-insensitive match for the
attribute's name.
Attribute values are a mixture of text
and character references, except with
the additional restriction that the
text cannot contain an ambiguous
ampersand.
Attributes can be specified in four
different ways:
Empty attribute syntax
Unquoted attribute value syntax
Single-quoted attribute value syntax
Double-quoted attribute value syntax
Here there hasn't mentioned a limit on the size of the attribute value. So I think there should be none.
You can also validate your document against the
HTML5 Validator(Highly Experimental)
I've never heard of any limit on the length of attributes.
In the HTML 4.01 specifications, in the section on Attributes there is nothing that mention any limitation on this.
Same in the HTML 4.01 DTD -- in fact, as far as I know, DTD don't allow you to specify a length to attributes.
If there is nothing about that in HTML 4, I don't imagine anything like that would appear for HTML 5 -- and I actually don't see any length limitation in the 9.1.2.3 Attributes section for HTML 5 either.
Tested recently in Edge (Version 81.0.416.58 (64 bits)), and data-attributes seem to have a limit of 64k.
From http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data:
Every HTML element may have any number of custom data attributes specified, with any value.
That which is used to parse/process these data-* attribute values will have
limitations.
Turns out the data-attributes and values are placed in a DOMStringMap object.
This has no inherent limits.
From http://dev.w3.org/html5/spec/Overview.html#domstringmap:
Note: The DOMStringMap interface definition here is only intended for JavaScript
environments. Other language bindings will need to define how DOMStringMap is to be
implemented for those languages
DOMStringMap is an interface with a getter, setter, greator and deleter.
The setter has two parameters of type DOMString, name and value.
The value is of type DOMString that is is mapped directly to a JavaScript String.
From https://bytes.com/topic/javascript/answers/92088-max-allowed-length-javascript-string:
The maximum length of a JavaScript String is implementation specific.
The SGML Defines attributes with a limit set of 65k characters, seen here:
http://www.highdots.com/forums/html/length-html-attribute-175546.html
Although for what you are doing, you should be fine.
As for the upper limits, I have seen jQuery use data attributes hold a few k of data personally as well.
For the sake of simplicity & learning something new, please don't suggest using two separate replace functions. I know that's an option but I would rather also know how to do this (or if it's not possible).
'<test></test>'.replace(/<|>/g,'$&'.charCodeAt(0))
This is what I've got so far. This sample code is, as you can tell, for another piece of code to escape HTML entities while still using innerHTML (because I do intend to include a few HTML entities such as small images, so again please don't suggest textContent).
Since I'm trying to replace both < and >, the problem is converting each individual one to their respective character codes. Since regular expressions allow for this "OR" condition as well as backreferences to each one, I'm hoping there's a way to get the reference of each individual character as they're replaced. $& will return <><> (because they're replaced in that order), but I don't know how to get them as they're replaced and take their character codes for the HTML entities. The problem is, I don't know what to use in this case if anything.
If that explanation wasn't clear enough, I want it to be something like this (and this is obviously not going to work, it'll best convey what I mean):
Assuming x is the index of the character being replaced,
'<test></test>'.replace(/<|>/g,'$&'.charCodeAt(x))
Hopefully that makes more sense. So, is this actually possible in some way?
'<test></test>'.replace(/[<>]/g,function(a) {return '&#'+a.charCodeAt(0)+';';});
I've put the characters in a square-bracket-thing (don't know it's proper name). That way you can add whatever characters you want.
The above will return:
<test></test>