|
JavaScript - Extract Img Tags From A Web Page
Hi,
How I get the images tags from an HTML page with Javascript (SRSc)? Regards FG Similar TutorialsHello, I was wondering if it is possible to do something like below using JS. Say I have some hidden text at the top of an HTML page... Code: <div id="text" style="visibility: hidden;">text</> and an empty tag at the bottom of the page. Code: <div id="empty_container"></div> Is there any way JS could grab the content inside #text and move it inside #empty_container when the page loads? Thanks. I'm looking for a simple javascript that can fill in the subject of an email message with whatever is in the title tags of the page they're on and also to include the link the the page in the body. [CODE] <a href="mailto:e@o.com?subject=&body=http://www.o.htm" title="Question"> [CODE] Thanks! I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? If I wanted to extract certain parts of the URL... how can I do this? I know how to extract the entire URL or just the search query but what if i want to do this /boxscore.asp?w=2&s=4&yr= Just extract the numbers 2 and 4 from the url. I want to make a new link for this site I am on to plug those 2 numbers into here /game.asp?gnum=2&gslot=4 That's basically what i want the new window to read. Hi all, I've a set of similar elements (to display thumbnails) having style attributes like Code: style="background:#ddd url('/images/photos/thumbs/89625045.jpg') top center no-repeat;"
Code: style="background:#ddd url('/images/photos/thumbs/708905 copy.jpg') top center no-repeat;"
etc. I need to get the background-image urls from the style (and then remove the part thumbs). My intention is to dynamically create an img element corresponding to each thumbnail image. I was thinking to use a substr() to get the urls and replace() to remove "thumbs", but the property style.backgrounImage gives a string like Code: url("/images/photos/thumbs/4923face.jpg")
in FF3, where as in FF2 and IE6 it gives Code: url(/images/photos/thumbs/4923face.jpg) . How can I proceed with this? Any help would be apreciated. Thanks. I am working on a simple movie database to practise my JavaScript and have encountered difficulty extracting information from the xml file. Let me explain my scenario. Sorry if it gets a bit long-winded! The interface I have created has three columns which each serve the following functions: Column 1 -> The user selects a film of their choice. Column 2 -> Once the user has selected a film in Column 1 then more information about the film appears in this column. This includes title, director and cast. The user has the option of then selecting a cast member to find out information about them. Column 3 -> Once the user has selected a cast member in Column 2 then their name and a picture of them appears in this column (using the <img> tag). This information in this column also includes the film title, film artwork (applied <img> tag). But the difficulty I have encountered is as follows - I have a rough idea of how to update column 2 in real time to reflect the changes in Column 1. The method I am using for acquiring the relevant information in Column 2 is creating an array then using the indexOf to retrieve a the details of a specific film. I know this method is wrong and it would be better to pull the relevant information from the xml file. How do I use the idx from the Column 1 selection to pull out the relevant information to put in Column 2 and 3? Here is what I've done so far: Code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function XMLload() {
jQuery.post(url, function(data) {getxml(data)}, 'xml');
}
function dataFromTag(node, t) {
var d = node.getElementsByTagName(t);
if (d.length == 0) return ('');
return (d[0].firstChild.nodeValue);
}
jQuery(document).ready(function() {XMLload();});
var url = 'movie.xml';
var xmlMovies;
var aryMovieList = [];
var xmlActors;
var aryActors = [];
var iframeOpen = '<html><head><\/head><body>'
var iframeClose = '<\/select><\/form><\/body><\/html>'
function getxml(xmldoc) {
xmlMovies = xmldoc.getElementsByTagName('movie');
var hstr = iframeOpen;
hstr += '<select size="' + xmlMovies.length + '" onchange="parent.actors(this.selectedIndex);">';
for (var MovieID = 0; MovieID < xmlMovies.length; MovieID++) {
aryMovieList[aryMovieList.length] = dataFromTag(xmlMovies[MovieID], "title");
xmlActors = xmlMovies[MovieID].getElementsByTagName("actor");
for (var ActorID = 0; ActorID < xmlActors.length; ActorID++) {
aryActors[aryActors.length] = dataFromTag(xmlMovies[MovieID], "director") + "/" + dataFromTag(xmlMovies[MovieID], "title") + "/" + dataFromTag(xmlActors[ActorID], "name");
}
hstr += '<option>' + aryMovieList[MovieID] + '<\/option>';
}
hstr += iframeClose;
// test for aryMovieList
// alert(aryMovieList);
// test for aryActors
// alert(aryActors);
with(document.getElementById('movies').contentDocument) {
open();
write(hstr);
close();
}
}
function actors(idx) {
var hstr = iframeOpen;
var selectActor = [];
hstr += 'title: ' + dataFromTag(xmlMovies[idx], 'title');
hstr += '<br>';
hstr += 'director: ' + dataFromTag(xmlMovies[idx], 'director');
hstr += '<br>';
for (var i = 0; i < aryActors.length; i++) {
var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
if (aryActorList >= 0) {
selectActor[selectActor.length] = i;
}
}
// alert(selectActor);
hstr += '<select size="' + selectActor.length + '" onchange="parent.info(this.selectedIndex);">';
for (var i = 0; i < aryActors.length; i++) {
var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
if (aryActorList >= 0) {
hstr += '<option>' + aryActors[i].substring(aryActors[i].lastIndexOf("/") + 1) + '<\/option>';
}
}
hstr += iframeClose;
with(document.getElementById('actors').contentDocument) {
open();
write(hstr);
close();
}
}
function info(idx) {
var hstr = iframeOpen;
hstr += '';
hstr += iframeClose;
with(document.getElementById('info').contentDocument) {
open();
write(hstr);
close();
}
}
</script>
</head>
Here is the XML file in use: Code: <movies>
<movie>
<title>Match Point</title>
<director>Woody Allen</director>
<image>Match-Point.jpg</image>
<actor>
<name>Scarlett Johansson</name>
<image>Scarlett-Johansson.jpg</image>
</actor>
<actor>
<name>Brian Cox</name>
<image>Brian-Cox.jpg</image>
</actor>
<actor>
<name>Matthew Goode</name>
<image>Matthew-Goode.jpg</image>
</actor>
<actor>
<name>Penelope Wilton</name>
<image>Penelope-Wilton.jpg</image>
</actor>
</movie>
<movie>
<title>Inception</title>
<director>Christopher Nolan</director>
<artwork>Inception.jpg</artwork>
<actor>
<name>Leonardo DiCaprio</name>
<image>Leonardo-DiCaprio.jpg</image>
</actor>
<actor>
<name>Ken Watanabe</name>
<image>Ken-Watanabe.jpg</image>
</actor>
<actor>
<name>Joseph Gordon-Levitt</name>
<image>Joseph-Gordon-Levitt.jpg</image>
</actor>
<actor>
<name>Marion Cotillard</name>
<image>Marion-Cotillard.jpg</image>
</actor>
<actor>
<name>Ellen Page</name>
<image>Ellen-Page.jpg</image>
</actor>
<actor>
<name>Tom Hardy</name>
<image>Tom-Hardy.jpg</image>
</actor>
</movie>
<movie>
<title>Blade II</title>
<director>Guillermo del Toro</director>
<artwork>Blade-II.jpg</artwork>
<actor>
<name>Wesley Snipes</name>
<image>Wesley-Snipes.jpg</image>
</actor>
<actor>
<name>Kris Kristofferson</name>
<image>Kris-Kristofferson.jpg</image>
</actor>
<actor>
<name>Ron Perlman</name>
<image>Ron-Perlman.jpg</image>
</actor>
<actor>
<name>Leonor Varela</name>
<image>Leonor-Varela.jpg</image>
</actor>
<actor>
<name>Norman Reedus</name>
<image>Norman-Reedus.jpg</image>
</actor>
</movie>
<movie>
<title>Pulp Fiction</title>
<director>Quentin Tarantino</director>
<artwork>Pulp-Fiction.jpg</artwork>
<actor>
<name>John Travolta</name>
<image>John-Travolta.jpg</image>
</actor>
<actor>
<name>Samuel L Jackson</name>
<image>Samuel-L-Jackson.jpg</image>
</actor>
<actor>
<name>Uma Thurman</name>
<image>Uma-Thurman.jpg</image>
</actor>
<actor>
<name>Harvey Keitel</name>
<image>Harvey-Keitel.jpg</image>
</actor>
</movie>
<movie>
<title>Avatar</title>
<director>James Cameron</director>
<artwork>Avatar.jpg</artwork>
<actor>
<name>Sam Worthington</name>
<image>Sam-Worthington.jpg</image>
</actor>
<actor>
<name>Zoe Saldana</name>
<image>Zoe-Saldana.jpg</image>
</actor>
<actor>
<name>Stephen Lang</name>
<image>Stephen-Lang.jpg</image>
</actor>
<actor>
<name>Michelle Rodriguez</name>
<image>Michelle-Rodriguez.jpg</image>
</actor>
</movie>
</movies>
Many thanks in advance! Hi, I'm a beginner of JavaScript. I need the code for creating pgv_pvid and ssid. I had searched the web, and got some code, I wonder if the code is right: Code: var curDate = new Date(); var curMs = curDate.getUTCMilliseconds(); pgv_pvid = (Math.round(Math.random() * 2147483647) * curMs) % 10000000000; ssid = "s" + (Math.round(Math.random() * 2147483647) * curMs) % 10000000000; WScript.Echo(pgv_pvid) WScript.Echo(ssid) I'm sure this is probably a simple question, but I'm going to ask anyway. I need to extract part of a URL and place it into a variable for use elsewhere on the page. The part to be extracted will be of varying lengths. As an example, if I have the following URL: http://more.stltoday.com/stltoday/st...e?OpenDocument I need to extract "SS". Basically, anything that appears between "static.nsf/" and "/Steve's_APT_test_page". That value needs to be put into a variable and called elsewhere on the page. For testing purposes, I'm using the following code, just to see if it works (which, so far, it doesn't): Code: <script type= type="text/javascript" language="javascript">
var page_url = window.location.href;
var segments = page_url.split("/");
alert(segments[4]);
</script>
Can anyone help? Thanks, Steve Hi, I currently have a asp.NET page which has a textbox with the ID: "txtbox1" I would like javascript to store the data entered into txtbox1 into a var. I have tried using var jVarName; jVarName = '<%#aVarName%>'; but so far it hasnt worked. Any suggestions would be appreciated ^^ Hi, I have an idea for putting news articles on my phone to read later when I have time. I'd like to be able to right-click the text of an article and choose "Send to Phone Queue." When I've got a few articles in the queue, I'd like to be able to bluetooth the file to my phone. I know some HMTL and CSS, but I'm very much a novice when it comes to JavaScript. I'm thinking that I probably can't even do a lot of this with JS because of it's limitations (i.e. writing to a file). Will I need to use PHP or Java for writing/bluetoothing the file? I was playing around with extracting the body-text of an article from FoxNews.com. I didn't get very far but you can see where I'm going with it. I welcome any comments, criticisms, etc. Thanks for anything you say, even shooting this down as unrealistic. Code:
function getBodyText() {
var divList = document.getElementsByTagName('div');
for ( i=0; i<=divList.length; i++) {
if (divList[i].getAttribute("class") == "entry-content KonaBody") {
. . .
I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript? Thanks, Marcelo Brazil Why do I get both the greedy and non-greedy? How do I extract "somestring" only? I'm on IE7. thanks Code: <script type="text/javascript"> var x = "(EVAL)(H:somestring)Some other Text here"; var full =(x.match(/\(H\:(.*?)\)/g)); // produces "(H:somestring)" as expected alert(full); var inside = (x.match(/\(H\:(.*)\)/)); // produces "(H:somestring),somestring" .. I only want "somestring" alert(inside); </script> I have a string of text, and starting from a particular spot (known to be a number), I want to find the length of that number. Here's what I have: Code: ...
var start = [...predetermined...]
var end = 0;
while (!isNaN(sourceCode.charAt(start + end))){
endCurrent++;
}
var myNum = sourceCode.substr(start, end) * 1;
So let's say var sourceCode = "alkdjabjasdsdf-53 dnalsdb..."; , startCurrent will already be at the "5" and I want to be able to extract the "53". What I have works, but it seems cumbersome... Any advice? I am trying to redevelop firefox addon, to give it more funcionality. I found JS file where all the functions are and started to edit it. What I want to achieve is to get target of an anchor under mouse pointer (when mouse pointer is over anchor, I right click and call addon from context menu). For example when I have anchor which HTML code is: Code: <a href="somewehere.com/place">place</a> when I right click on this code and call my addon I would like to alert its href (somewehere.com/place) I wrote a function: Code: function ff()
{
var current_target=this.href;
alert(current_target);
}
but it gives me udefined on alert Any hints to achieve this are highly appreciated. Thanks I'm looking for something that allows me to add tags to a photo like this website: http://fukung.net By clicking add tag it opens a input box and once added adds to a DB. How would I do something along those lines? Where to put the <ol>&&</ol> tags so everytime i run the javascript it numbers each indivdiual items which the javascript is looping. Code: <table border="2"table align="center" cellpadding="40">
<tr>
<th width="80%"> Questions & Time</th>
<th>Status</th>
</tr>
<tr>
<td><% for (int i=0; i < theList.size(); i++) {%>
<tr>
<td><%= theList.elementAt(i)+ " " + theTime.elementAt(i) %>
<% }%>
</td>
<td>Where is the pending goes:</td>
</tr>
<tr>
</table>
Hi, hope someone can see an answer here. I have 4 div tags which are hidden to begin with from the css as shown below: Code: #story1 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
#story2 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
#story3 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}
#story4 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}
The contents of these is pulled out of a db and so the quantity of text changes (within certain parameters) and so the size of the divs changes, hence no height: setting. I know I could get around this by setting an absolute height and using overflow to show a scrollbar but I would rather not have a scrollbar as the amount of text will only be 100-200 words. Elsewhere I have used the following script to equalise div tags Code: if (document.getElementById("member1").offsetHeight < document.getElementById("member2").offsetHeight){
document.getElementById("member1").style.height = document.getElementById("member2").offsetHeight + "px";
}
else {
document.getElementById("member2").style.height = document.getElementById("member1").offsetHeight + "px";
}
I tried this for my div tags but because they initially start with display:none it sets the height of them to zero. Is there a simple way to make all of these the same height whilst they are hidden? I'm using forum with bb rich text editor, the problem that sometimes when a user copy and paste content, there ere extra codes that are not supported like: Code: [highlight=#ff0000][/highlight] [blockquote][/blockquote] [CENTER ALIGN=CENTER][/CENTER ALIGN] Can you help me to write a script that automatically reformat the html content when pasted and only keeps specified tags like [img],[url],[b], defined in array ... If it is not possible to reformat content when paste, I can add a button to the editor and call that function to format the content and return plain text with a specific tags. I tried this script: Code: function removeHtmlTag(strx){
if(strx.indexOf("[")!=-1)
{
var s = strx.split("[");
for(var i=0;i<s.length;i++){
if(s[i].indexOf("]")!=-1){
s[i] = s[i].substring(s[i].indexOf("]")+1,s[i].length);
}
}
strx = s.join("");
}
return strx+'';
}
It made to strip html tags, I replaced <> with [], It removes all tags and don't put space instead of the removed tags, example: Code: hello[h1]Name[/h1] Will be like : helloName ??? I got an idea to make a stupid trick, like converting [IMG] to {IMG} and run that function and re convert {IMG} to [IMG] ... Please help, I'm not good in Regular Expressions. Thanks for your time, Regards. Hello there, I have one drop down list having some characters name. I have created this list dynamically using javascript. I have <h3> tag in html having same characters' name using that I had created drop down list. There are <blockquote> along with <h3> tag which is speech of that character. I have to generate the javascript in such a way that, if character "A" is selected and sppech belong to that character should be visible. Is any one help me? my following code able to match <h3> tags and hiding it but not working properly. Please help me out. Code:
function selectedOption()
{
var indx = newSel.selectedIndex;
var selectedText = newSel.options[indx].text;
h3Tag = document.getElementsByTagName("h3");
var nestedH3;
//alert(h3Tag);
bQuote = document.getElementsByTagName("blockquote");
for(var i=0; i<h3Tag.length; i++)
{
tagName[i]=h3Tag[i].innerHTML;
if(selectedText != tagName[i] && selectedText != "Show All Lines")
{
//alert("Char: "+tagName[i]);
h3Tag[i].style.display = "none";
bQuote[i].style.display = "none";
}
else if(selectedText == "Show All Lines")
h3Tag[i].style.display = "block";
}
}
Hi, I have a regular expression which removes anything between <script> and </script> tags. The problem comes when there is more than one on a page, eg. Code: <script>lose this</script> content I want to keep <script>lose this</script> Everything in that string is removed... how can I limit it to complete tags only? I did a search but could only find ones that either remove tags only, or have the same problem as mine. Cheers, Gus |
|||||||