THE SETUP:
On the page, in a hidden div, is a well-formed JSON object.
As part of this object, some of the values are HTML, and in this HTML, double-quotes are HTML-encoded, like so: "addtionalInfo": "If you need more help, please visit <a href="http://www.google.com">Google</a>"
Later on the page, I'm trying to write JS that will read this object in so other cool things can be done.
THE PROBLEM:
innerHTML seems to be implicitly decoding the quotes, which means JSON.parse() (and similar jQuery options) fail because the syntax bonks. I can't replace() the quotes since they're all over the place in proper JSONy ways.
AN EXAMPLE:
<span class="hiddenField" id="TheJSONObject">
{ "thing" : "thingvalue", "badthing" : "a <a href="http://www.google.com">link!</a>", "lastthing" : "lastthingvalue" }
</span>
<script>
var newobj = JSON.parse(document.getElementById("TheJSONObject").innerHTML.trim());
alert(newobj.thing);
PROOF FROM THE CONSOLE (CHROME):
console.log(document.getElementById("TheJSONObject").innerHTML)
{ "thing" : "thingvalue", "badthing" : "a <a href="http://www.google.com">link!</a>", "lastthing" : "lastthingvalue" }
THE QUESTION:
Is there any way to get the actual raw innerHTML without JS trying to do me a kindness like this so that JSON.parse() will work?
That’s completely impossible. You have a <span>, not a <script> or anything else that’s treated as literal text, so there’s no difference between a " and a ". You need to encode it properly to begin with; that probably means HTML-encoding the JSON-encoded object containing the HTML-encoded value for output as HTML.
If you’re not able to modify that output, the closest you can get will probably be to make a (XHR) request and parse it out manually with the entities intact.
Related
I have these two variables that I am trying to compare. They both have the same value, however, one is a href variable - meaning, it's being read from a file like this
<a href=http://google.com>Variable</a>
It's read like this, but displayed as an anchor tag in the browser, so when I go to compare a value using print "$collect_zids{$key} --> $temp";I see in the browser as
Variable --> Variable
How it appears in the browser. One text another link.
I'm assuming these two values are different hence why this code does not run
if($collect_zids{$key} eq $from_picture){
print "<h1>Hello</h1>";
}
Is there a way I can convert the href variable into a normal scalar variable so that I can compare them?
Thanks!
P.S. I think Javascript might be the only way, however, I don't have any experience with it.
There is no such thing as an "href variable". You have two scalar variables. One contains plain text and the other contains HTML. Your task is to extract the text inside the HTML <a> tag from the HTML variable and to compare that text with the text from the plain text variable.
One way to do that would be to remove the HTML from the HTML variable.
my $html = '<a href=http://google.com>Variable</a>';
my $text = 'Variable';
$html =~ s/<.+?>//g;
if ($html eq $text) {
say "Equal";
} else {
say "Not Equal [$html/$text]";
}
But it cannot be emphasised enough that parsing HTML using a regular expression is very fragile and is guaranteed not to work in many cases. Far better to use a real HTML parser. HTML::Strip is made for this very purpose.
#!/usr/bin/perl
use strict;
use warnings;
use feature 'say';
use HTML::Strip;
my $html = '<a href=http://google.com>Variable</a>';
my $text = 'Variable';
my $parser = HTML::Strip->new;
$html = $parser->parse($html);
if ($html eq $text) {
say "Equal";
} else {
say "Not Equal [$html/$text]";
}
It's also worth pointing out that this is answered in the Perl FAQ
How do I remove HTML from a string?
Use HTML::Strip, or HTML::FormatText which not only removes HTML but
also attempts to do a little simple formatting of the resulting plain
text.
Update: In a comment, you say
I have no way of using these methods since I am not explicitly defining the variable.
Which is clearly not true. How a variable is initialised has no bearing whatsoever on how you can use it.
I assume your HTML text is in the variable $from_picture, so you would strip the HTML with code like this:
my $parser = HTML::Strip->new;
my $stripped = $parser->parse($from_picture);
if($collect_zids{$key} eq $stripped){
print "<h1>Hello</h1>";
}
I have no idea where you got the idea that you couldn't use my solution because I was directly initialising the variables, where you were reading the data from a file. An important skill in programming is the ability to see through complex situations and extract the relevant details. It appears you need to do some more work in this area :-)
I found the answer using the Perl module HTML::FormatText;
use HTML::FormatText;
my $formatter = HTML::FormatText->new();
my $string = HTML::FormatText->format_file("path_to_the_file"); #$string variable to hold the result and the path must be for a file.
After using the HTML::FormatText module, I was able to get the raw string that was being read, instead of it being interpreted as HTML. So, I was getting <a href=http://google.com>Variable</a> returned, instead of just Variable. After getting the raw string, I could use regex to extract the parts that I needed.
Credit to - https://metacpan.org/pod/HTML::FormatText
This should be way easier than it is, but it's got me stuck.
Im putting some JSON in an input data attribute and the quotes on the first key are closing the attribute.
Here's what I'm trying to do:
var html = `<input type="checkbox" data-values='${dataVals}' />`;
Where dataVals is a JSON string like this
'{"checked":true,"unchecked":false}'
But it's showing up in the browser like this:
<input type="checkbox" data-values="{"checked":true,"unchecked":false}">
And the browser is reading it essentially as though it's this.
data-values="{"
Which obviously isn't what I want.
I'm clearly missing something. Any thoughts?
Combination of #T.J. Crowder and #Teemu
I added a replace at the end of the json string to replace double quotes with "
JSON.stringify({ ... }).replace(/\"/g, """)
Then also stopped trying to run JSON.parse() when I wanted to get the value later since $.data('values') already returns a javascript object (when it can).
JSON.parse($(this).data('values')) => $(this).data('values')
Is this a bug within JavaScript? http://jsfiddle.net/SommerEngineering/mr8sZ/
<a href='javascript:test("test")'>Works</a><br/>
<a href='javascript:test("test"")'>Does not work</a>
Its looks like JS goes into the string, converts back the " into " and then tries to execute the command, which is then of course wrong.
You are correct. What you're writing there is html, so the html entity "e; is rendered as a double quote ", then executed as JavaScript. Because test("test""); is not valid javascript, this will throw an error. If you want to pass test" into the function, you would escape the quote like this: test("test\"");
Inline JavaScript is not a good practice and has tons of non-intuitive issues. Read some of these results: Why is inline JS bad?
Here's an example of how to do this properly.
var a = document.getElementById('myElem');
a.addEventListener('click', function() {
test('test"');
});
Just note there are many ways to get element references and you might want to use a class and attach the handler within a loop.
This is not a bug. The double quotes work because the HTML attribute has single quotes. However, the " entity is evaluated by HTML, so the data passed to the JavaScript engine is:
javascript:test("test"")
If you want to escape the quotes use
javascript:test("test\"")
as a \ escapes the quote.
This is not a js bug, indeed it's an html behavior. The " is an html entity that gets decoded to " prior to js execution.
Anyway, avoid to have embedded js in html, it's not a good practice, your case is one reason.
So, I have a some json data which I create in my controller like so:
Notes = JsonConvert.SerializeObject(contact.Notes.OrderBy(x => x.DateLogged).Select(x => new
{
id = x.Id,
date = x.DateLogged,
content = x.Content,
logged = x.Username
}))
This then gets passed to the view, now which statment can I do to achieve the results of having a variable contain that json data:
var data = '#Html.Raw(Model.Notes)'
or
var data = JSON.parse('#Html.Raw(Model.Notes)');
EDIT
the content variable holds some "\n" which when passed to the view using the first choice from above generates an error, saying
Unexpected Token
it only does it with \n so what is going wrong here? the bottom method doesn't quite work.
var data = JSON.parse('#Html.Raw(Model.Notes)');
This doesn't work - you can't put a JSON literal inside a JavaScript string. Any backslash in it will be an escape character to the JavaScript parser, not the JSON parser. A newline comes out like:
var data = JSON.parse('{"content": "abc\ndef"}');
which means the string you are asking JSON to parse is:
{"content": "abc
def"}
which is not valid as you can't have a literal newline in a JSON string.
To do this with JSON.parse you would have to JS-string-literal encode the JSON output, so you would end up with "abc\\ndef". The alternative would be to include the JSON directly in the script block as var data = #Html.Raw(Model.Notes);, but there are problems with this to do with the differences between JS and JSON (primarily characters U+2028 and U+2029) and the enclosing HTML context (ie what the sequence </script does).
Getting the escaping right here is harder than it looks, so you should avoid injecting anything into a <script> block. Better to put in-page JSON data in a data- attribute and read it from the DOM; this way you can use the normal HTML escaping Razor gives you by default.
<div id="notes" data-notes="#Model.Notes">
...
var data = JSON.parse(document.getElementById('notes').getAttribute('data-notes'));
bobince is obviously correct in what he says, it makes so much sense, thanks for that.
However, my solution was to simply do:
var data = #Html.Raw(Model.Notes);
Because, Newtonsoft already has converted it to a proper JSON format, so all it needs to do, is be assigned to a variable to be manipulated.
I think grabbing the content from a the HTML DOM is a bit too much for this.
Perhaps this is expected, but I found it odd since I am now starting with jQuery.
So, I am writing an application using node and jade. In the index.jade I have a statement of the form
p Welcome subscriber
span(id="subscriber") someID
Now once the connection is established between the client and the server, the server sends a welcome JSON message with some data. One of them is the id of the client which I want to replace above. Once the client receives the welcome JSON message it initializes the appropriate structures and then I make a call to a function loadStats:
function loadStats() {
var myText = "" + myData.id + ".";
$('#subscriber').text(myText);
$('#subscriber').html(myText);
};
In the screen I can see that the text "someID" is replaced by the ID of the client. However, when I actually inspect the html code of the page that I am looking at I see a statement of the form:
<p>Welcome subscriber <span id="subscriber">someID</span></p>
In other words in the actual HTML code the text "someID" has not been replaced. Is this something expected? How was the replacement done? Moreover, it appears that working with either of the statements
$('#subscriber').text(myText);
$('#subscriber').html(myText);
gives the replication on the screen but not on the actual html content of what is presented on screen. Is this the correct behavior? From what I understood (and expect) the .text() replaces the visual data of the element with the specific id and the .html() replaces the content. Am I missing something?
Thanks in advance. jQuery rookie here.
Two rules for expressions in pug:
In attributes you use quotes to output literal text and you leave the quotes out when you want to use a variable, and
For the content of a tag you use an equals sign when you want pug to evaluate an expression, or don't put anything if you want literal text
So with those rules in mind, looking at your code you will output the attribute "subscriber" as a literal and "someId" as a literal.
span(id="subscriber") someID
Results in:
<span id="subscriber">someId</span>
You wanted both to be dynamic so remove the quotes in the attribute and put an equals sign after the element:
span(id= subscriber)= someID
This will dynamically replace both with variables.