"\ n" is treated as a string literal in JavaScript
I have a select tag with an options tag that has the value "\ n". When this option is selected and I get the value using jQuery, JavaScript seems to treat it as a string literal rather than interpreting it as a string.
I tried escaping, unesacping, escaping, unescaping using jQuery htmlEncoding, jQuery htmlDecoding method and even tried concatenating with empty string. I pull my hair out. It should be that easy.
At least five workarounds often pop up in my head with varying levels of elegance, but for now I'm more interested in why this behavior exists. Is there something simple I'm missing? My real question is, "Why does JavaScript handle a string \ n one way in one context, but differently in another" and not "how can I make it work".
Here is the code
Html
<select id="delimiter">
<option value="\n">New Line</option> <!--This should produce a linefeed-->
<option value=",">, (Comma)</option>
<option value=";">; (Semicolon)</option>
<option value="\t">Tab</option>
</select>
<button onclick="doit()">
Check It
</button>
JavaScript
function doit(){
var delimiter = $("#delimiter").val();
console.debug("\n"); //produces an actual linefeed character
console.debug(delimiter); //this produces the string "\n"
}
I have some code here: https://codepen.io/codysechelski/pen/MoJKMB?editors=1111
source to share
"why does JavaScript parse a string \ n one way in one context but differently?"
You should first understand that a string literal is not an actual string in memory, but part of the js syntax for creating strings. Therefore escape sequences starting with the "\" character are passed to the js engine to handle the next char differently.
HTML does not have this special syntax. So, "\" is just "\" and "\ n" is "\ n". When this string crosses the html-js border via the DOM API (which is not part of the js syntax), it remains the "same" two letter string.
By the way, there are different ways to encode newline in js which creates the same string in memory
const withEscSequence = '\n'
// es2015
const usingStringTemplate = `
`
// directly from char code
const fromCharCode = String.fromCharCode(10)
// using unicode escape sequence
const unicodeEscSequence = '\u000A'
// using hex escape sequence
const hexEscSequence = '\x0A'
console.log(withEscSequence === usingStringTemplate, withEscSequence === fromCharCode, withEscSequence === unicodeEscSequence, withEscSequence === hexEscSequence)
source to share
replace "\ n" with your value with the new string code: " "
In the HTML tag attribute, you must use the HTML character for the special character.
source to share
Why does JavaScript handle a string
\n
one way in one context, but differently in another?
Because it is not JavaScript, not a string literal. <option value="\n">
- plain HTML and backslash is not an escape character in HTML. You can use a literal line break or character object instead .
I tried to escape ...
But apparently not correct. It always depends on the context that eludes use, and sometimes you even need to chain them. Some suitable solutions:
-
Literal characters in HTML source:
<option value=" ">New Line</option> <option value=",">Comma</option> <option value=" ">Tab</option>
selectEl.value
-
References to character objects in HTML source to avoid strange formatting:
<option value="
">New Line</option> <!-- or --> <option value=",">Comma</option> <option value="	">Tab</option> <!-- or 	 -->
selectEl.value
-
JSON literals in HTML source to avoid knowing characters:
<option value=""\n"">New Line</option> <option value="","">Comma</option> <option value=""\t"">Tab</option>
JSON.parse(selectEl.value)
-
JSON string content in HTML source:
<option value="\n">New Line</option> <option value=",">Comma</option> <option value="\t">Tab</option>
JSON.parse('"'+selectEl.value+'"')
source to share