I want to pull from a tumblr blog and display it on another webpage using javascript.
I'm using the $TUMBLR_BLOG/api/read/json feed which provides a variable filled with the information from the blog post.
I want to print everything up to the "<!-- more -->" set of characters in the 'regular-body' section, ie. I don't want to print everything in the 'regular-body' just up to that more section.
Any thoughts on how to do that?
Eg. API read: http://blog.intercut.yegfilm.ca/api/read/json
Eg. Basic code I'm using:
<script type="text/javascript" src="http://blog.intercut.yegfilm.ca/api/read/json"></script>
<script type="text/javascript">
// The variable "tumblr_api_read" is now set.
document.write(
'<h3> ' + tumblr_api_read.posts[0]['regular-title'] + '</h3>' +
tumblr_api_read.posts[0]['regular-body']);
</script>
<script type="text/javascript">
// The variable "tumblr_api_read" is now set.
var url = tumblr_api_read.posts[0]['url'];
var title = tumblr_api_read.posts[0]['regular-title'];
var body = tumblr_api_read.posts[0]['regular-body'];
body = body.substring(0,body.indexOf("<!-- more -->"));
document.write('<h3> ' + title + '</h3>' + body);
</script>
Simple as that :)
Something like responseData.split("<!-- more -->")[0] ?
Get the index of the <!-- more --> and print the substring upto that index.
sampleString = "Foo <!-- more --> Bar";
moreIndex = sampleString.indexOf("<!-- more -->");
if (moreIndex > 0) {
console.log(sampleString.substring(0, moreIndex));
}
JSFiddle
Use the javascript SubString() method:
Example:
var mystring = 'Hello World <!-- more -->';
alert(mystring.substring(0,mystring.indexOf("<!-- more -->")));
jsFiddle: http://jsfiddle.net/8CXd8/
Documentation: http://www.w3schools.com/jsref/jsref_substring.asp
Related
I am trying to execute the following code:
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id + '" height="600px" width="100%" />';
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + link ;
}
</script>
</div>
But while executing, the & in src="" converts to & which breaks the original URL and doesn't go to the desired destination. I looked up on the internet but as I am a noob, I was not able to figure it out. Please help me to make this work!
All you need to do is
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id +
'" height="600px" width="100%" />';
var new_link = link.replaceAll('&','&');
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + new_link;
}
</script>
This is definitely a blogger issue, and the reason behind happening is :
The character "&" is an ISO HTML reserved character used to denote the start of a parameter.
To overcome this the Blogger editor translate the & you enter to the HTML entity, & , that will display & when the page or URL is rendered in a browser, so that you don't have to do it yourself.
In my mongoDB:
description: "Test\n\nTest"
When I try to show it in my ejs file the text ignores de "\n"
Test Test
My HTML
<div id="description">
<%= test.description %>
</div>
I tried to fix this using this code:
var desc = $('#description').text();
desc.replace("\n", "<br>");
$('.description').text(desc);
Also tried:
desc.replace(/(?:\r\n|\r|\n)/g, '<br />');
and:
desc.split("\n").join("<br />");
None of this worked
If I print var desc = $('#description').text(); in the Chrome console, it shows this:
Test
Test
What I'm doing wrong and how do i fix this?
Use html() instead of text() as you want to change the HTML markup....text() will ignore the <br> tags
Also you are just replacing the value not updating it.....need to put the replaced value in the desc variable by
desc = desc.replace(/\n/g, "<br>");
Also desc.replace("\n", "<br>"); will just replace the first \n match
Stack Snippet
var desc = "Test\n\nTest"
desc = desc.replace(/\n/g, "<br>");
$('#description').html(desc);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="description"></div>
Using your code, desc.split("\n").join("<br />"); works fine for me.
var desc = $('#description').text();
console.log("original text = " + desc);
desc = desc.split("\n").join("<br />");
console.log("using split/join = " + desc);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="description">
Here is
the contents of
the div
with line breaks in it.
</div>
$("#comparison-qty").html('<div id="comparison-qty"><a href="'+
[[${url_compare_view}]] +'">' + error.transport + '</a></div>');
Hello, I have this code. I want [[${url_compare_view}]] this thymeleaf var to be value of attribute href, but it isn't work. Where wrong?
First you have to store your variable on inline script, in order to access its data later, because thymeleaf only works in html page not on js files. Try this.
<script th:inline="javascript">
/*<![CDATA[*/
var urlCompareView = /*[[${url_compare_view}]]*/ 'url_compare_view';
/*]]>*/
</script>
Then you can use ir on your javascripts.
$("#comparison-qty").html('<div id="comparison-qty">' + error.transport + '</div>');
Hope it helps you.
Edit
If you want do it all inlinie. try this.
<script th:inline="javascript">
/*<![CDATA[*/
var urlCompareView = /*[[${url_compare_view}]]*/ 'url_compare_view';
$("#comparison-qty").html('<div id="comparison-qty">' + error.transport + '</div>');
/*]]>*/
</script>
I am using the following code to retrieve the number of likes from the Facebook Graph API, and this works perfectly. What I am having trouble doing is using jQuery .css to alter the color of the last character in the returned value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/krewella?callback=?";
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url,function(json){
var html = "<ul><li>" + json.likes + "</li><li>" + json.about + "</li></ul>";
//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity:1}, 500);
});
});
</script>
</head>
<body>
<div id="wrapper"><!--wrapper open-->
<div class="facebookfeed">
<h2>Loading...</h2>
</div>
</div><!--wrapper closed-->
</body>
How about something like:
json.likes = json.likes.toString().slice(0,-2) + "<span class='red'>" + json.likes.toString().substr(-1) + "</span>"
var html = "<ul><li>" + json.likes + "</li><li>" + json.about + "</li></ul>";
With the trivial css:
.red{
color:#ff0000;
}
I'm trying to add a piece of javascript code to a certain <div>.
I enclosed the code in pre and code tags, but when I actually run this the code gets executed. Obviously, that's not what I want at all.
var code = '<pre><code><script type="text/javascript" src="http://source.com/test.js"><\/script>\n';
code = code + '<script type="text/javascript">\n';
code = code + '\tadimp.id = ' + 1 + ';\n';
code = code + '\tadimp.type = ' + 1 + ';\n';
code = code + '\tadimp.generate();\n';
code = code + '<\/script></code></pre>';
$("#code").html(code);
You should use < and > for < and > in this case. Try this
var code = '<pre><code><script type="text/javascript" src="http://source.com/test.js"><\/script>\n';
code = code + '<script type="text/javascript">\n';
code = code + '\tadimp.id = ' + 1 + ';\n';
code = code + '\tadimp.type = ' + 1 + ';\n';
code = code + '\tadimp.generate();\n';
code = code + '<\/script></code></pre>';
$("#code").html(code);
Surprise! You just manufactured your own XSS vulnerability. Always HTML-encode any data you put into HTML. ("data" is anything you want to appear on screen.)
In the HTML DOM this is thankfully completely automatic. Just use the text property, not the HTML property.
var code = [
'<script type="text/javascript" src="http://source.com/test.js"><\/script>',
'<script type="text/javascript">',
'\tadimp.id = ' + 1 + ';',
'\tadimp.type = ' + 1 + ';',
'\tadimp.generate();',
'<\/script>'
].join('\n');
$('#code').text(code);
// --------^^^^
Live demo: http://jsfiddle.net/6qdBD/3/
Pre tags format the text not necessarily keep what the text within them from being executed as html. Or in this case JavaScript. A better method would be to replace < and > with the html entities < and >.
Instead of using the < and > symbols use < and >
var code = '<script type="text/javascript" src="http://source.com/test.js"></script>\n'
I suggest to just simply replace the < in <script tag to '< and at the end to '>.
Since HTML tags are permitted inside PRE, you cannot just "insert" a text file into an HTML document by slapping <PRE> and </PRE> around them. You have to convert the &, < and > characters into entities first.
From http://htmlhelp.com/reference/wilbur/block/pre.html