I'm trying to grab the first image in an html string like this one
<table border="0" cellpadding="2" cellspacing="7" style="vertical-align:top;"><tr><td width="80" align="center" valign="top"><font style="font-size:85%;font-family:arial,sans-serif"><img src="//t3.gstatic.com/images?q=tbn:ANd9GcQVyQsQJvKMgXHEX9riJuZKWav5U1nI-jdB-i1HwFYQ-7jGvGrbk9N_k0XEDMVH-HAbLxP1wrU" alt="" border="1" width="80" height="80" /><br /><font size="-2">Wall Street Journal</font></font></td><td valign="top" class="j"><font style="font-size:85%;font-family:arial,sans-serif"><br /><div style="padding-top:0.8em;"><img alt="" height="1" width="1" /></div><div class="lh"><b><b>Obama's</b> Letters to Corinthian</b><br /><font size="-1"><b><font color="#6f6f6f">Wall Street Journal</font></b></font><br /><font size="-1">The <b>Obama</b> Administration has targeted for-profit colleges as if they are enemy combatants. And now it has succeeded in putting out of business Santa Ana-based Corinthian Colleges for a dilatory response to document requests. Does the White House plan ...</font><br /><font size="-1" class="p"></font><br /><font class="p" size="-1"><a class="p" href="http://news.google.com/news/more?ncl=dPkBozywrsIXKoM&authuser=0&ned=us"><nobr><b>and more »</b></nobr></a></font></div></font></td></tr></table>
here is the tag of the image
<img src="//t3.gstatic.com/images?q=tbn:ANd9GcQVyQsQJvKMgXHEX9riJuZKWav5U1nI-jdB-i1HwFYQ-7jGvGrbk9N_k0XEDMVH-HAbLxP1wrU" alt="" border="1" width="80" height="80">
every images has got this kind of url
//tx.gstatic.com where x is a number i think between 0<x<3
That's what I do without success and I don't understand why this happen
var re = /<img[^>]+src="?([^"\s]+)"?\s*\/>/g;
var results = re.exec(HTMLSTRING);
var img="";
if(results!=null && results.length!=0) img = results[0];
The regular expression you provide indeed is not general enough to capture your <img> tag.
There are two options:
Make a better regular expression. This way lies madness. But in this case, it is sufficient to add the possibility of other attributes after src:
var re = /<img[^>]+src="?([^"\s]+)"?[^>]*\/>/g;
var results = re.exec(HTMLSTRING);
var img="";
if(results) img = results[1];
Note [^>]* replacing your \s*, and also note results[1] instead of results[0] if you want the source and not the tag itself.
Use a DOM parser to handle DOM. This is the easy path.
var jsdom = require("jsdom");
var img_sources = jsdom.env(
HTMLSTRING,
function (errors, window) {
var imgs = window.document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
var src = imgs[i].getAttribute('src');
if (src) console.log(src);
}
}
);
You could use the jQuery NPM module and do this:
var jQuery = require('jquery');
try {
var src = jQuery('YOUR_HTML_STRING').find('img')[0].src;
console.log('Output:\nSrc: ' + src + '\nNum: ' + (src.match(/\/\/t[0-3]/)[0])[3]);
} catch (e) {
console.log('Could not find <img>!');
}
Related
I have a string like this.
x = '<div class="sample">
<img src="http://www.example.com/i/java.png">
</div>
<div class="sample_another">
<img src="/i/somedir/python.png">
</div>'
I want to convert to this
x = '<div class="sample">
<img src="http://www.example.com/i/java.png" height="200px" width="100px">
</div>
<div class="sample_another">
<img src="/i/somedir/python.png" width="150px" height="150px">
</div>'
input string will be a html doc. for all the images in the doc, i want to add the height and width property. and to get the height and width property i have to use something like this
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.example.com/intl/logo.gif';
p.s. i tried using this solution but the problem i face is that the string might have the script tag and DOM parses it as a closing script tag. I cant find much for regex either. So is there any other way to obtain this result ?
Thanks.
If you can remove scripts than go with this code:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
var string ="<script type"text/javascript"></script><img alt=''
src='http://api.com/images/UID' /><br/>Some plain text<br/><a
href='http://www.google.com'>http://www.google.com</a>";
var elem= document.createElement("div");
$(string).find('script').remove();
elem.innerHTML = string;
var images = elem.getElementsByTagName("img");
for(i=0; i<images.length; i++){
images[i].width = "150";
images[i].height = "250";
}
string = elem.innerHTML;
Problem you are facing with is that it turns out that HTML5 does not allow script tags to be dynamically added using the innerHTML property. So you will need to add them dynamically on some other way.
This is some code that might help you:
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src','http://example.com/site.js');
document.head.appendChild(my_awesome_script);
Currently making a Windows 8 RSS reader app for a specific site. Everything is working except for video [usually YouTube] since the website uses <object></object> to embed videos rather than <iframe>. the result is just a large blank object block where ever the video should be.
My first instinct was to find and replace the <object></object> tags with <iframe> and add the src attribute with the proper URL. I created a dummy app to test if this method would work, and the solution worked, if all you were changing was static HTML.
Dummy App Code:
<body>
<div style="text-align: center;">
<object width="853" height="480" id="test">
<param name="movie" value="http://www.youtube.com/v/2rDs7W3WRIk?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2rDs7W3WRIk?version=3&hl=en_US" type="application/x-shockwave-flash" width="853" height="480" allowscriptaccess="always" allowfullscreen="true"></embed>
</object></div>
Wrote and called the below function, which does indeed work. Want to do something similar to the XML document:
function setHTML5video() {
var listOfSrcs = document.getElementsByTagName("embed");
for (var i = 0; i < listOfSrcs.length; i += 1) {
var videoSrc = document.getElementsByTagName("embed")[i].getAttribute("src");
var newSrc = videoSrc.replace("/v/", "/embed/");
//var newNode = '<iframe width="853" height="480" src="' + newSrc + '" frameborder="0" allowfullscreen></iframe>';
var iFrame = document.createElement("iframe");
iFrame.setAttribute("src", newSrc);
document.getElementsByTagName("object")[i].replaceNode(iFrame);
//WinJS.Utilities.setOuterHTMLUnsafe(test, newNode);
}
}
End of Dummy App Code.
However, due to lack of knowledge of the Windows 8 API and despite searching all day for the answer online, I cannot find how to do the same to an XML feed that is being downloaded from an external site. I am probably missing something fundamental.
function itemInvoked(z) {
var currentArticle = articlesList.getAt(z.detail.itemIndex);
WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
articlelist.style.display = "none";
articlecontent.style.display = "";
mainTitle.innerHTML = currentArticle.title;
WinJS.UI.Animation.enterPage(articlecontent);
}
When the user clicks on a thumbnail, the XML RSS feed for that corresponding article is pulled up and injected into the with the id = "articlecontent". I want to modify that feed prior to injecting it.
<section id="content">
<div id="articlelist" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: mmoNewsPosts.ItemList.dataSource, itemTemplate: MMOItemTemplate }"></div>
<!-- Article Content -->
<div id="articlecontent"></div>
<!-- Article Content -->
</section>
Edit, because there appears to be confusion, I already have the feed loaded in via WinJS.xhr:
function downloadMMOFeed(FeedUrl) {
WinJS.xhr({ url: FeedUrl, responseType: "xml" }).then(function (rss) {
pageTitle = rss.responseXML.querySelector("title").textContent;
mainTitle.innerHTML = pageTitle;
var items = rss.responseXML.querySelectorAll("item");
//more stuff...
for (var n = 0; n < items.length; n +=1) {
article.content = items[n].querySelector("description").textContent;
//more stuff...
Could you not just load the XML feed in by XHR and then parse the result before binding it to the page? For Example:
WinJS.xhr({
url: "http://www.w3schools.com/xml/note.xml", responseType: "xml"
})
.done(
function (request) {
var text = request.responseText;
//TODO : Parse the XML returned by the server which is in var text
});
In Windows 8 there is no cross domain restriction so something like this is entirely possible.
In my Spring web application, for customer registration page I am adding and removing divs containing text, img and a-ref elements. When I write the code inside the same jsp the page works perfectly but according to my requirement when I try to put javascript code into a js file and import it and click add button a new div is inserted along with script code as given below,
the js function I am using to add a div is..
function addInputBox() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
var htmlString = '<div style="margin-top: 5px"><input type="text"name="service_name" title="Service Name" maxlength="200" style="width:400px;vertical-align:middle;"/>'+
'<img src="<c:url value="/resources/img/common/x.png" />" alt="" style="vertical-align:middle;margin-left: 5px"/>'+
'<img src="<c:url value="/resources/img/ope/new.png" />" style="vertical-align:middle;margin:2px 0 0 2px;margin-left: 5px" /> </div> ';
newdiv.innerHTML = htmlString;
ni.appendChild(newdiv);}
any idea what may went wrong? any help would be greatly appreciated..
pretty sure the script is there , because you are not escaping the quotation..try this
<img src="<c:url value=\"/resources/img/common/x.png\" />" alt="" style="vertical-align:middle;margin-left: 5px"/></a>'+
'<img src="<c:url value=\"/resources/img/ope/new.png\" />" style="vertical-align:middle;margin:2px 0 0 2px;margin-left: 5px" />
missing escape..."\" in ur img tag....
not sure wat c:url is...
hope this helps
I think its trying to render your <c:url part as a tags .... are you able to provide the paths to those images in the string explicitly?
I have a html page that gets automatically refreshed every 1 ms. I did it using mata tag:
<html>
<head>
<title>My Page</title>
<meta http-equiv="refresh" content="0.001">
</head>
<body>
<img src=" 0.bmp" alt="Smiley face" height="100" width="200" />
</body>
</html>
Now my requirement is such that after every refresh I must load a new file. So in my folder I have files named: 0.bmp, 1.bmp, 2.bmp,... 1000.bmp, which will be loaded on the html file. i.e after every refresh a new file from the folder will be loaded. Basically the file name in
<img src=" 0.bmp" alt="Smiley face" height="100" width="200" />
will change from 0.bmp to 1...1000.bmp and so on.
How can we do this in html i.e change the file name dynamically?
Edited #1:
I have just realized that my problem is basically of animation. So given 1000 images stored in hard disk, I have to play them one by one on an HTML page. This should be as fast as possible. The only requirement is it must be on html pages, this is because these HTML pages will be accessed from a client in a network. the problem that I am thinking is slow playback because read/write to the disk may not be fast.
Edited # 2
After getting inputs from following answers, I was able to animate the images. The issue right now I am facing is the display rate is too small, and so fluctuations are coming up. I understand this is a problem of slow read/write from hard disk. So I guess if I can put these images in buffer i.e: System RAM, and write a html/js code to access the images from the RAM instead of the disk, the play back will be much faster. Can someone send me a sample code to, write images in RAM and use html/js code to access these images from RAM?
Note: as per the policy of stackoverflow, I am updating my question as and when I am solving various steps of the original problem.
What you are trying to do should not be done by refreshing continuously the web page, but by the use of Javascript.
Consider this method using JQUERY and setInterval():
See a working Fiddle Example!
HTML
<html>
<head>
<title>My Page</title>
</head>
<body>
<img src="path_to_image_01.jpg" alt="Smiley face" height="128" width="128" />
<img src="path_to_image_02.jpg" alt="Smiley face" height="128" width="128" />
<img src="path_to_image_03.jpg" alt="Smiley face" height="128" width="128" />
<img src="path_to_image_04.jpg" alt="Smiley face" height="128" width="128" />
</body>
</html>
JQUERY
$(document).ready(function() {
$('img:not(:first)').hide();
var refreshId = setInterval( function()
{
var $target = $('body img:first');
$target.hide().next().show();
$target.appendTo('body');
}, 1000);
});
What's being done
Hide all images
`$('img:not(:first)').hide();`
Initialize an interval of 1 sec that will collect the first image,
hide it, jump to the next image, show it, lastly move the previous
image to the end.
var refreshId = setInterval( function()
{
var $target = $('body img:first');
$target.hide().next().show();
$target.appendTo('body');
}, 1000);
This keeps on going animating the images every second that passes.
I am updating my answer based on a now different question.
You can use this plugin: https://code.google.com/p/jsmovie/ It does exactly what you want by animating a set of images.
Original Answer Below:
Although I'd agree with many of the other answers, it seems the OP needs to refresh the entire window instead of doing this via ajax without a page reload.
<img src="" alt="Smiley face" height="100" width="200" style="display:none" />
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
var imgIndex = 0;
$(document).ready(function() {
if (getParameterByName("index")!='') {
imgIndex = parseInt(getParameterByName("index"));
}
$('img').attr('src', imgIndex + '.bmp').show();
var refreshId = setInterval( function()
{
imgIndex++;
location.href = location.pathname + "?index=" + encodeURIComponent(imgIndex);
}, 1000); // 1 second update as needed
});
The following fiddle demonstrates this though I dont' have a serial set of images so the jsfiddle is a little different in that it updates an index of already set images forked from a previous answer but it does demonstrate the page reload.
http://jsfiddle.net/smf9w/1/
DON'T, really DON'T do this!!
Use JS instead. Use setInterval() and use a time span greater than 1m...
As others say, this is not the way to do it. But you can use cookie or localstorage on modern browsers.
function getData() {
var c = 0;
if ("localStorage" in window && null !== window.localStorage)
c = localStorage.count;
else {
count = document.cookie.split("count=");
c = c[1].split(";");
c = c[0];
}
return c;
}
function updateData(count){
if ("localStorage" in window && null !== window.localStorage)
localStorage.count = count;
else {
var e = new Date;
e.setTime(e.getTime() + 31536E6);
e = e.toGMTString();
document.cookie = "count=" + count + "; expires=" + e + "; path=/"
}
}
var count = getData();
document.write('<img src="'+ count +'".bmp" alt="Smiley face" height="100" width="200" />');
updateData(++count);
Code above is just a sample.
Hey guys,
basically this is my page and the JS simply changes the images if one is clicked, this works grand if the <img src='worseun.png' name='worse' border='0' /> is first beneath the <body>, but doesn't work if there is another <img src='' /> above it! I'm still learning js and this is a head wreck, can anyone suggest a fix? Heres it working with nothing above
<script type="text/javascript">
function worseChange()
{
var theImga = document.getElementsByTagName('img')[0].src;
var xa = theImga.split("/");
var ta = xa.length-1;
var ya = xa[ta];
if(ya=='worseun.png')
{
document.images.worse.src='worse.png';
document.images.cd.src='cdun.png';
}
}
function cdChange()
{
var theImgb = document.getElementsByTagName('img')[1].src;
var xb = theImgb.split("/");
var tb = xb.length-1;
var yb = xb[tb];
if(yb=='cdun.png')
{
document.images.worse.src='worseun.png';
document.images.cd.src='cd.png';
}
}
</script>
</head>
<body>
<a name=1>Uno</a>
<img src='worseun.png' name='worse' border='0' /> <br />
<img src='cd.png' name='cd' border='0' />
<a name=2>Dos</a>
<body>
Thanks guys,
James
That first line:
var theImga = document.getElementsByTagName('img')[0].src;
means, "get the very first <img> tag in the document, and then fetch its 'src' attribute value." You can instead give the "real" image an "id" value, and use document.getElementById('whatever') to get it.
<img id='worse' src='worseun.png' name='worse' border='0' />
and then
var theImga = document.getElementById('worse').src;