Escape characters to be used in a javascript literal string - javascript

I would like to take a string that the user will enter to a text box in a form and turn it into a javascript literal. So I'd, for instance, turn the " character into \".
Is there any complete list of characters that would need to be escaped?

You only need to escape your delimiter and/or whatever enclosing quotes you choose (escape double quotes if you enclose your string in double, escape single otherwise).
If you're going to render it as HTML, you may wnat to convert them to entities (e.g. & -> &)

Related

How to write a long string literal in which no characters are escaped?

I have a script (in another language) that generates pieces of valid JavaScript which is then executed in the browser. The generated javascript looks e.g. like this:
my_function(123,"long string with lots of weird characters");
That "long string" can potentially contain quotes, apostrophes, backslashes etc... For example the "long string" can be any of these:
hello"there
hello'there
hello\\\\"\\\'\'\\\'"'\"\\"""there
All these characters should be passed as they are to my_function(), without assuming that backslash is a special character that escapes something.
Does javascript have some sort of unique "tag" to delimit a long string literal in which nothing should be "escaped" or "interpreted"? For example a construct similar to this:
my_function(123, [<STRING_START>]long string with lots of weird characters[<STRING_END>]);
I need something like this and I can guarantee that my long string won't contain the string "][<STRING_END>]" so this would work. However I cannot easily guarantee that it won't contain quotes and/or backslashes.
I know that I can use e.g. the normal quotes to delimit my string and programmaticaly add backslashes (in my javascript generator) before all required characters inside the string but the existence of "tags" shown above (or something similar) would make the life easier for me.
you can use String.raw :
It's used to get the raw string form of template literals, that is,
substitutions (e.g. ${foo}) are processed, but escapes (e.g. \n) are
not.
var hello= String.raw` there
hello'there
hello\\\\"\\\'\'\\\'"'\"\\"""there `;

How to improve this Regular expression validation?

I tried to write a form validation for description textarea> of the users about their owns like he/she education or experience.
I wrote this Regex for this textarea, but I have a problem if user use above comma it's not allowed, for example if user written "House's", it's not allowing to write this comma '.
PWhich symbols may needed or predicate while users describe owns?
I used this Regex:
$descriptionValidation = "/^[a-zA-Z0-9\.\-\,\"\(\) ]+[a-zA-Z0-9\.\-\,\"\(\) ]*$/";
To match a whole string and require that the string only consist of alphanumeric characters and: dots, commas, single-quotes (also called apostrophes, but not "above commas"), double-quotes, left parentheses, right parentheses, spaces, and hyphens, use the following expression.
The ^ and $ metacharacters ensure that the characters span the entire length of the string. + means one or more of the any of the characters in the list. The "list" is technically called a "character class". a-z is the full range of letters and \d is the full range of numbers. - does have special meaning inside of a character class but only if it has a non-ranged expression on both sides of it. If you wish to prevent mistakes with hyphens inside of a character class, you can add a backslash to escape it or you can write the hyphen at the start or end of the character class OR you can write it next to a character range.
/^[a-z\d.,'"() -]+$/i
When declaring this pattern in php using single quotes, you will need to escape the single-quote in the character class.
$descriptionValidation = '/^[a-z\d.,\'"() -]+$/i';

When is the HTML attribute backslash escaped as a JavaScript string?

I noticed that backslash is escaped when I get "attribute value including backslash" with JavaScript in the following code.
console.log(document.getElementById("test").getAttribute("class")); // -> \A
console.log(document.getElementById("test").getAttribute("class").replace("\\A", "\A")); // -> A
console.log(document.getElementById("test").dataset.b); // -> \B
console.log(document.getElementById("test").dataset.b.replace("\\B", "\B")); // -> B
<div id="test" class="\A" data-b="\B"></div>
The backslash is treated as a special character in JavaScript, and two backslashes (\\) represent one backslash (\).
The result of the above code means that when getting the attribute value with JavaScript using getAttribute(), one backslash (\) is escaped to two backslashes (\\) at somewhere.
However, in the specification, it seems that the corresponding process is not applied.
Question
In which process of getAttributes() the backslash of HTML attribute is escaped (\ -> \\)?
There's a difference between string literals (which require escaping) and string values from other places (like html, ajax, etc), which are what they look like. Only when converted to literals (ex: JSON.stringify, some console views, etc) do JS strings have backslash escaping. The escape is an output formatting artifact; internally, there are no escapes in the sequence of characters.
HTML doesn't need the same escaping on blackslashes, due to different roots of the standard. An attribute isn't "converted" to one with escaped backslashes unless it's formatted as a string literal. That would happen at a stage between the string and it's visible output. You can use alert() instead of console.log() to see the string as it really is. I believe that specifically for the console, the
goal is to be more helpful to developers than accurate to the internals.

Write HTML Special Character into a Variable

$("<h2/>", {"class" : "wi wi"+data.today.code}).text(" " + data.city + data.today.temp.now + "F").appendTo(custom_example);
Hi there, I'm trying to alter the code above to add the degrees icon just before the (F)arenheit marker. I've tried entering + html("°") + but it doesn't work. My JS is pretty rough and I was hoping I could get a quick answer here before I spent too long trying and failing. Thanks!
I want the end result to print something like: Encinitas 65°F
Special characters are characters that must be escaped by a backslash\, like:
Single quote \'
Double quote \"
Backslash \\
The degree ° is not a special character, you can just write it, as it is.
Edit: If you want to use the unicode of °F, just write: '\u2109'.
Escape Special Characters JavaScript
JavaScript uses the \ (backslash) as an escape characters for:
\' single quote
\" double quote
\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed
\v vertical tab (IE < 9 treats '\v' as 'v' instead of a vertical tab
('\x0B').
If cross-browser compatibility is a concern, use \x0B instead of \v.)
\0 null character (U+0000 NULL) (only if the next character is not a
decimal digit; else it’s an octal escape sequence)
Note that the \v and \0 escapes are not allowed in JSON strings.
First of all the degree character needs not to be escaped. So simply entering "°F" should do the job.
However, if you are in doubt with the codepage of your JS code you could use a JavaScript escape sequence. JS escape sequences are quite different from HTML escapes. The do not support decimal values at all. So first of all you have to convert 176 to hex: b0. The correctly escaped equivalent to "°F" is "\xb0F". It will work too and is more robust with respect to codepage issues of you platform's source editor.
If you really want to assign HTML code you need to use the .html() function. But this is mutual exclusive to .text(). So in this case all of your content needs to be HTML rather than plain text. Otherwise an HTML injection vulnerability arises. I.e. you need to properly escape angle brackets and some other symbols in data.city and maybe data.today.temp.now as well.
JS itself has no built-in function to escape HTML. But JQuery provides a trick: $('<div/>').text(data.city).html() will return appropriately escaped HTML. See HTML-encoding lost when attribute read from input field for more details.
I would recommend not to use .html() unless you really need it, e.g. if you want to apply styles or formatting to parts of the text only.

Javascript CR+LF will break string?

When storing '\n\r' inside a string constant it will make the Javascript engine throw an error like "unterminated string" and so on.
How to solve this?
More info: basically I want to use Javascript to select text into a TEXTAREA HTML field and insert newlines. When trying to stuff those constants, I get an error.
String literals must not contain plain line break characters like CR and LF:
A 'LineTerminator' character cannot appear in a string literal, even if preceded by a backslash \. The correct way to cause a line terminator character to be part of the string value of a string literal is to use an escape sequence such as \n or \u000A.
So having a line break like this is invalid:
"foo
bar"
Instead you need to use an escape sequence like:
"foo\nbar"

Categories

Resources