Using NodeJS I would like to parse a variable defined in JSON, which is embeded in HTML of 3rd party website. What is the easiest way to get mentioned variable from HTML?
Chunk of HTML from which I would like to extract mentioned JS can be seen bellow:
...
<footer>
<div>
<script type="application/ld+json">
{"#context":"http:\/\/schema.org","#type":"BreadcrumbList","itemListElement":[{"#type":"ListItem","position":1,"item":{"#id":"https:\/\/www.domain.com\/","image":"https:\/\/assets.domain.com\/img\/facebook\/stuf.png","name":"Home"}}]}
</script>
<script>
var API_URL = ["https:\/\/api1.domain.com\/api","https:\/\/api2.domain.com\/api","https:\/\/api3.domain.com\/api"],
</script>
</div>
</footer>
...
The following HTML is parsed from XY website using NodeJS. I would like to avoid using eval().
I tried with JSDOM, but I didn't know how to select mentioned <script>. Is regex the only solution?
In case you provided, the selector will be: footer>div>script:nth-child(2).
Is this what you're asking for?
Related
This question already has answers here:
HTML/Javascript: how to access JSON data loaded in a script tag with src set
(10 answers)
Closed 1 year ago.
My json file looks like this:
{
"data": {
"test":"0123"
}
}
And I get this error: Uncaught SyntaxError: Unexpected token ':'
Why does this happen and how can I fix the problem?
Edit: the HTML code
<html>
<body>
<button id="clickThis" onclick="change()">
Text here
</button>
<script type="text/javascript" src="./lista.json">
function change() {
var mydata = JSON.parse(data)
document.getElementById("clickThis").innerHTML = "this"
}
</script>
</body>
</html>
<html>
<body>
<button id="clickThis">
Text here
</button>
<script src="./lista.json">
</script>
</body>
</html>
You can try use src= on older versions of html, but HTML5 doesn't load json content into html.
From the HTML5 specification:
When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.
So I recommend to use this code. It was tested in Visual Studio and working properly (you maybe need to correct json path, since I don't know where it is in your web application)
<script type="text/javascript">
$.getJSON('content/lista.json', function(json) {
var test= JSON.stringify(json.data.test);
alert(test);
});
</script>
it is using ajax to get json from server. But src= also send request to the server or to another website even to get resource and it works slower then ajax.
<!DOCTYPE html>
<html>
<body>
<script crossorigin src="https://unpkg.com/#daily-co/daily-js"></script>
<script>
callFrame = window.DailyIframe.createFrame();
callFrame.join({ url: 'https://your-team.daily.co/hello' })
</script>
</body>
This code is trying to display a video function by embedding. I need to convert this to jsx to add it to my webpage or find another way to create a video call using react.
You can use https://magic.reactjs.net/htmltojsx.htm which is an online HTML to JSX compiler.
You can also use https://transform.tools/html-to-jsx beside https://magic.reactjs.net/htmltojsx.htm as mentioned above.
As described in the daily-js docs
Install the daily-co node package.
npm install #daily-co/daily-js
Then create a component that uses it.
// webpack/node-style require
//
const DailyIframe = require('#daily-co/daily-js');
let callFrame = DailyIframe.wrap(MY_IFRAME);
// or, cutting-edge, super-whizzy import
//
import DailyIframe from '#daily-co/daily-js';
let callFrame = DailyIframe.wrap(MY_IFRAME);
There is some tools online that convert Html to jsx and react components for exemple
https://helpfordev.com/html-to-jsx
When converting HTML to JSX there are five steps you need to apply:
All prop names follow camelCase
Number attributes use curly braces
Boolean 'true' can be written with just the property name. 'False' should be written with curly braces
The 'class' attribute is written as 'className'
In-line styles are provided as objects
I have to work with a series of JSON files that have HTML inside them. I need to use that HTMl to format the body text of a series of pages and cannot use templates for this information.
I know jQuery has the .html() method which can be used to parse the JSON string as HTML.
Is there a better way using Angular? I would rather not use jQuery for my app.
Thanks.
use ng-html-bind directive in your html...
HTML
<div ng-controller="ngBindHtmlCtrl">
<p ng-bind-html="myHTML"></p>
</div>
where myHTML is your html string...
CONTROLLER
$scope.myHTML = 'I am an <code>HTML</code>string with links! and other <em>stuff</em>';
I´m having a little problem. I am using gmap in primefaces and we need to load the script
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"/>
However I need to load the script according to the language of the user Locale.
How can I manage to do that without "hardcoding" the string?
I tried something like this :
<script src="http://maps.google.com/maps/api/js?sensor=true&language="#{template.userLocale} type="text/javascript"/>
// {template.userLocale} has a string o the locale
Can you help please?
You've there a HTML syntax error. What you end up getting would look like this given a language of en:
<script src="http://maps.google.com/maps/api/js?sensor=true&language="en type="text/javascript"/>
(rightclick page in browser and do View Source to see it yourself)
You need to move the doublequote to the end of the attribute value:
<script src="http://maps.google.com/maps/api/js?sensor=true&language=#{template.userLocale}" type="text/javascript"/>
So that the HTML will end up to be:
<script src="http://maps.google.com/maps/api/js?sensor=true&language=en" type="text/javascript"/>
EL can just be used in template text. You need to realize that JSF basically produces HTML code. The HTML <script src> attribute and the EL #{} doesn't run in sync. Instead, JSF/EL procuces it and you just need to make sure that the resulting HTML is syntactically valid.
I have the following code in my view:
<apex:commandLink data-role="button" action="{!someAction}">
<apex:param name="someVar" value="someVarVal">
</apex:commandLink>
The code does not work because commandLink does not take the "data-role" attribute.
How can I pass a parameter like I am with the second line, but also have an attribute like "data-role" on the rendered link?
I've never found a way to put extra attributes into VF tags, your best bet IMO would be to add some javascript which runs on page load and then use JQuery's .attr() method to add the attribute to the component.
Something like the following (assuming you've included jquery through a static resource)
<apex:commandLink styleClass="myLink" action="{!someAction}">
<apex:param name="someVar" value="someVarVal"/>
</apex:commandLink>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".myLink").attr("data-role", "button");
});
<script>
You'll notice I've used a class instead of ID here, this is simply because SFDC generated IDs include symbols which need to be escaped for use with jQuery, and I find this is just the easier and cleaner solution to use (albeit probably slightly slower).
you can just use html pass through syntax :
html-attribute=value
for example
html-class="toto" will output class="toto"