I would like to understand why using a browser, and editing an html page with the inspect button, the value fields of the radio inputs cannot be changed with;
value='"'
I change the character to & quot;
value="""
because chrome firefox and others do not allow to insert the character " clean within the value?
can you give me an explanation on this?
The inspector favors double quotes to clearly show strings. It may not actually look that way in the DOM, but in the inspector it's the rule. You can't have an unescaped double quote in-between 2 others, so value="\"" might work, or value=""" as you said. Not sure how relevant this link is but it shows that they purposely hard-code that double quote in there
Related
Whenever I add attributes to html elements like 'class' or 'id', VSCode automatically input two double quotes right after I type '=':
<div class='modal-header' id=""></div>
As you can see from the 'class', I prefer single quote, so I had to delete the automatically added double quotes.
Where can I tweak this feature?
Thanks!
Lubbie
Seems like vscode has recently implemented a feature that auto-inserts quotes into html if you type something=.
I was struggling the last few days over and over again because my finger memory is so used typing in the opening quote manually. I always ended up with something like class=""button or id=""stuff"". Not cool.
Anyways, I found the setting that can control it.
Search for html.autoCreateQuotes and disable it.
Then you'll have to type the opening quote manually and it will work with single quote too.
If you actually like the feature and want it to insert single quotes, change the setting html.completion.attributeDefaultValue.
You can change it to single quotes in >File >Preferences >Settings >Search
html.completion.attributeDefaultValue
and set the dropdown to
singlequotes
Did you ever find a solution? When I type <div className= and then hit tab, it autocompletes like this...
This is in a .tsx file, and I have the following configuration...
html.completion.attributeDefaultValue "doublequotes"
and I use prettier for formatting, with singlequote set to true.
I would like all my javascript/typescript code to use single quotes, but html attributes to be double quotes. For some reason VS Code is not inserting double quotes on the tab completion.
When I save (auto formatting), the single quotes in the html attributes are correctly replaced, but I would like them to be inserted correctly on tab completion.
My problem occurs when I try to use some data/strings in a p-element.
I start of with data like this:
data: function() {
return {
reportText: {
text1: "This is some subject text",
text2: "This is the conclusion",
}
}
}
I use this data as follows in my (vue-)html:
<p> {{ reportText.text1 }} </p>
<p> {{ reportText.text2 }} </p>
In my browser, when I inspect my elements I get to see the following results:
<p>This is some subject text</p>
<p>This is the conclusion</p>
As you can see, there is suddenly a difference, one p element uses and the other , even though I started of with both strings only using . I know and technically represent the same thingm, but the problem with the string is that it gets treated as a string with 1 large word instead of multiple separate words. This screws up my layout and I can't solve this by using certain css properties (word-wrap etc.)
Other things I have tried:
Tried sanitizing the strings by using .replace( , ), but that doesn't do anything. I assume this is because it basically is the same, so there is nothing to really replace. Same reason why I have to use blockcode on stackoverflow to make the destinction between and .
Logged the data from vue to see if there is any noticeable difference, but I can't see any. If I log the data/reportText I again only see string with 's
So I have the following questions:
Why does this happen? I can't seem to find any logical explanation why it sometimes uses 's and sometimes uses 's, it seems random, but I am sure I am missing something.
Any other things I could try to follow the path my string takes, so I can see where the transformation from to happens?
Per the comments, the solution devised ended up being a simple unicode character replacement targeting the \u00A0 unicode code point (i.e. replacing unicode non-breaking spaces with ordinary spaces):
str.replace(/[\\u00A0]/g, ' ')
Explanation:
JavaScript typically allows the use of unicode characters in two ways: you can input the rendered character directly, or you can use a unicode code point (i.e. in the case of JavaScript, a hexadecimal code prefixed with \u like \u00A0). It has no concept of an HTML entity (i.e. a character sequence between a & and ; like ).
The inspector tool for some browsers, however, utilizes the HTML concept of the HTML entity and will often display unicode characters using their corresponding HTML entities where applicable. If you check the same source code in Chrome's inspector vs. Firefox's inspector (as of writing this answer, anyway), you will see that Chrome uses HTML entities while Firefox uses the rendered character result. While it's a handy feature to be able to see non-printable unicode characters in the inspector, Chrome's use of HTML entities is only a convenience feature, not a reflection of the actual contents of your source code.
With that in mind, we can infer that your source code contains unicode characters in their fully rendered form. Regardless of the form of your unicode character, the fix is identical: you need to target these unicode space characters explicitly and replace them with ordinary spaces.
I created a directive that highlights code but it seems browsers are modifying that code before I can get to it and highlight it.
Here's what's happening.
I have a directive called my-compile which basically just spits the passed value into the element's innerHTML and runs a $compile on it.
eg:
<span my-compile="details"></span>
And details would be something like:
here are some details and here's a <code lang="java">first = temp & 0xFF &</code>
here's the directive code that matters (this is in the link function):
element.html(details); $compile(element.children())(scope);
So $compile sees the <code> directive and hands that off to the code directive, except, and here's the problem, the <code> directive does an element.html() to get the contents and this is returned:
first = temp & 0xFF &
The problem is that the code is now wrong, because the first & wasn't escaped.
How can I still use the <code> directive in a similar fashion but preserve the & sign (and I assume this happens with > and < signs too)?
My only idea was a lookup service but that's kinda messy, but maybe my only option as the second it hits the browser's DOM it gets escaped, but the escaped & doesn't get double escaped.
I've also tried using element[0].innerHTML thinking maybe it's an Angular/jQuery sanitization thing, but it it isn't.
The problem is that when you added html to your DOM first time element.html(details); browser parses it as html(btw - it fixes incorrect escaping, adds missing close tags, etc), and when your are trying to access it later - you are getting html with all fixes done during parsing.
The only way how you can fix it - properly encode your code content as a text entity(for provided example if you need text first = temp & 0xFF & encoded version would be first = temp & 0xFF &), an access it as element.text() but not as element.html() in your code directive.
I have a HTML Tag <textarea>$FOO</textarea> and the $FOO Variable will be filled with arbitrary HTML and JavaScript Content, to be displayed and edited within the textarea. What kind of "escaping" do I neet to apply to $FOO?
I first tought of escaping it HTML but this didnt work (as I will then get shown not the original HTML Code of $FOO but rather the escaped content. This is of course not what I want: I want to be displayed the unescaped HTML/JS Content of the variable...
Is it impossible to display HTML Content within a <textarea> tag and also allow it to be editable as full HTML?
thanks
jens
I first tought of escaping it HTML
Yes, that's right. The contents of a <textarea> are no different from the contents of any other element like a <span> or a <p>: if you want to put some text inside you must HTML-escape any < or & characters in it to < and & respectively.
Browsers do tend to give you more leeway with fault markup in <textarea>s, in that the fallback for invalid unescaped < symbols is to render them as text instead of tags, but that doesn't make it any less wrong or dangerous (for XSS).
but this didnt work
Please post what you did that didn't work. HTML-escaping is definitely the right thing.
You need to replace the special character of HTML with character references (either numerical character references or entity references), in textarea, at least &, < and >.
escaping html is fine - it will remove <'s and >'s etc.
ive run into a problem where i am outputting a filename inside a comment tag eg. <!-- ${filename} -->
of course things can be bad if you dont escape, so it becomes:
<!-- <c:out value="${filename}"/> -->
the problem is that if the file has "--" in the name, all the html gets screwed, since youre not allowed to have <!-- -- -->.
the standard html escape doesnt escape these dashes, and i was wondering if anyone is familiar with a simple / standard way to escape them.
Definition of a HTML comment:
A comment declaration starts with <!, followed by zero or more comments, followed by >. A comment starts and ends with "--", and does not contain any occurrence of "--".
Of course the parsing of a comment is up to the browser.
Nothing strikes me as an obvious solution here, so I'd suggest you str_replace those double dashes out.
There is no good way to solve this. You can't just escape them because comments are read in plaintext. You will have to do something like put a space between the hyphens, or use some sort of code for hyphens (like [HYPHEN]).
Since it is obvoius that you cannnot directly display the '--'s you can either encode them or use the fn:escapeXml or fn:replace tags for appropriate replacements.
JSTL documentation
There's no universal working way to escape those characters in html unless the - characters are in multiples of four so if you do -- it wont work in firefox but ---- will work. So it all depends on the browser. For Example, looking at Internet Explorer 8, it is not a problem, those characters are escaped properly. The same goes for Googles Chrome... However Firefox even the latest browser (3.0.4), it doesn't handle escaping of these characters well.
You shouldn't be trying to HTML-escape, the contents of comments are not escapable and it's fine to have a bare ‘>’ or ‘&’ inside.
‘--’ is its own, unrelated problem and is not really fixable. If you don't need to recover the exact string, just do a replacement to get rid of them (eg. replace with ‘__’).
If you do need to get a string through completely unmolested to a JavaScript that will be reading the contents of the comment, use a string literal:
<!-- 'my-string' -->
which the script can then read using eval(commentnode.data). (Yes, a valid use for eval() at last!)
Then your escaping problem becomes how to put things in JS string literals, which is fairly easily solvable by escaping the ‘'’ and ‘-’ characters:
<!-- 'Bob\x27s\x2D\x2Dstring' -->
(You should probably also escape ‘<’, ‘&’ and ‘"’, in case you ever want to use the same escaping scheme to put a JS string literal inside a <script> block or inline handler.)