Any one knows a way to get all the URLs in a website using JavaScript?
I only need the links starting with the same domain name.no need to consider other links.
Well this will get all the same-host links on the page:
var urls = [];
for(var i = document.links.length; i --> 0;)
if(document.links[i].hostname === location.hostname)
urls.push(document.links[i].href);
If by site you mean you want to recursively get the links inside linked pages, that's a bit trickier. You'd have to download each link into a new document (for example in an <iframe>), and the onload check the iframe's own document for more links to add to the list to fetch. You'd need to keep a lookup of what URLs you'd already spidered to avoid fetching the same document twice. It probably wouldn't be very fast.
Or in es6
[...document.links].map(l => l.href)
Javascript to extract (and display) the domains, urls, and links from a page
The "for(var i = document.links.length; i --> 0;)" method is a good collection to work with. Here is a example to pulls it from specific parts of the html page.
You could alter it to select and filter to whatever you want. And then use the list however you want. I wanted to show a working example.
var re = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/i;
var reG = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/ig;
var printList = document.getElementById("domains");
var unorderedList = document.createElement("ul");
unorderedList.setAttribute("id", "domainsList");
unorderedList.setAttribute("class", "list-group");
printList.appendChild(unorderedList);
var domainsList = document.getElementById("domainsList");
var list = document.getElementsByTagName("a");
//console.log(list);
var listArray = Array.from(list);
//loop through the list
listArray.forEach(function(link){
//console.log(link.href);
//console.log(typeof(link.href));
var listItem = document.createElement("li");
listItem.setAttribute("class", "list-group-item domain");
domainsList.appendChild(listItem);
var str = link.href;
var match = str.match(reG);
var matchGroup = str.match(re);
//console.log(matchGroup[5]);
var domainNode = document.createTextNode("Domain: " + matchGroup[5]);
listItem.appendChild(domainNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var websiteNode = document.createTextNode("Website: " + matchGroup[3]);
listItem.appendChild(websiteNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var fullNode = document.createTextNode("Full Link: " + match);
listItem.appendChild(fullNode);
domainsList.appendChild(listItem);
unorderedList.appendChild(listItem)
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Pull Domains form a page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card-deck">
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 1</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 2</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 3</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 4</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 5</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 6</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 7</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 8</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 9</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 10</div></div>
</div>
<div id="domains"></div>
</body>
</html>
JSFiddle of a working copy
In Javascript:
(function(){
let links = [], l = document.links;
for(let i=0; i<l.length; i++) {
links.push(l[i].href);
}
return links;
})();
using jquery u can find all the links on the page that match a specific criteria
$("a[href=^domain.com]").each(function(){
alert($(this).attr("href"));
});
Related
That's my problem: I need to update two separates progbars with their own width but the And bar take the Or percentage and the Or one remains empty. I'm not so good with HTML and Js but I noticed that changing div class=progress-bar the And one works but the Or one doesn't. How can I fill every bar with its percentage?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>skills</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"></h1>
</div>
<!--SKILLS--------------------------------------------------------------------------------------->
<div class="row">
<div class="col-lg-6 mb-4">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"></h6>
</div>
<div class="card-body">
<!--AND--------------------------------------------------------------------------------------->
<body>
<div class="m-4">
<h4 class="small font-weight-bold">AND</h4>
<div class="progress">
<div class="progress-bar" style="min-width: 0px;"></div> <!-- Progress bar HTML -->
</div>
<!-- JavaScript -->
<script>
const and=["And_1","And_2","And_3","And_4","And_5","And_6","And_7"];
const myand=["And_1","And_2"];
var la=and.length;
var lm=myand.length;
var mywid=0;
for(let i=0; i<la; i++){
for(let j=0; j<lm; j++){
if(and[i]==myand[j]){
mywid++;
}
}
}
var perc=(99/la)*mywid;
perc=Math.round((perc + Number.EPSILON) * 100) / 100
var bar = document.querySelector(".progress-bar");
function makeProgress(){
bar.style.width = `${perc}` + "%";
bar.innerText = `${perc}` + "%";
}
makeProgress();
</script>
</div>
</body>
<!--OR--------------------------------------------------------------------------------------->
<body>
<div class="m-4">
<h4 class="small font-weight-bold">OR</h4>
<div class="progress">
<div class="progress-bar" style="min-width: 0px;"></div> <!-- Progress bar HTML -->
</div>
<!-- JavaScript -->
<script>
const or=["Or_1","Or_2","Or_3","Or_4","Or_5"];
const myor=["Or_1"];
var lo=or.length;
var lmo=myor.length;
var orwid=0;
for(let i=0; i<lo; i++){
for(let j=0; j<lmo; j++){
if(or[i]==myor[j]){
orwid++;
}
}
}
var orperc=(99/la)*orwid;
orperc=Math.round((orperc + Number.EPSILON) * 100) / 100
var orBar = document.querySelector(".progress-bar");
function makeProgress(){
orBar.style.width = `${orperc}` + "%";
orBar.innerText = `${orperc}` + "%";
}
makeProgress();
</script>
</div>
</body>
</html>
You are setting the same elements width twice using document.querySelector(".progress-bar")
instead you should give each progress bar an unique ID and set the width for them separately
In HTML:
<div class="progress-bar" id="and-bar" style="min-width: 0px;"></div>
Query selector in Javascript:
var andBar = document.querySelector("#and-bar");
I would like to have each of these posts to be clickable, so that a new page appears and I can show more detailed information of the clicked post. I am using a jsonplaceholder to get my information
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Mini reddit</title>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
</div>
<div class="container">
<div class="row" id="postsDiv">
</div>
</div>
<script src="js_mini_reddit.js"></script>
</body>
</html>
javascript:
var div = document.getElementById("postsDiv");
var count = 0;
function getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true);
xhr.onload = function(){
if (this.status == 200)
{
let data = JSON.parse(this.responseText);
for (let index = 0; index < 10; index++)
{
div.innerHTML +=`
<div class="col-4 text-white card bg-dark mx-auto border border-white" >
<div class="card-body">
<p class="card-title">ID: ${data[count].id} </p>
<p class="card-title">TITLE: ${data[count].title} </p>
<p>BODY: ${data[count].body} </p>
</div>
</div>`
count += 1;
}
}
}
xhr.send();
}
getData();
Below is my attempt of trying to hide my jumbotron class in the iframe with Javascript. I've had no luck!
The error in my console is:
Cannot read property 'style' of undefined
I can't understand why it's not working - sorry if I'm being stupid here, really not the best at Javascript. Any help would be appreciated.
var iframe = document.getElementById("myFrame");
var elmnt = iframe.contentWindow.document.getElementsByClassName("jumbotron")[0];
elmnt.style.display = "none";
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col-8">
<iframe id="myFrame" style="" width="100%" border="0" frameborder="0" src="https://remelo.com/booking/c/1/remelo" height="789"></iframe>
</div>
</div>
</div>
I want to change the div order through JavaScript. i didn't know how to do that
This is the two div which implement in html, but i want div id="navigation" show in html after div class="row subheader".
<div id="navigation">
<div class="item" style="display:inline;">
Home
</div>
<div class="item" style="display:inline;">Blog: Kannu</div>
</div>
<div class="row subheader">
<div class="container">
<div id="blogsubheader">My Blog</div>
</div>
</div>
I want like this from javascript please check follow.
<div class="row subheader">
<div class="container">
<div id="blogsubheader">My Blog</div>
</div>
</div>
<div id="navigation">
<div class="item" style="display:inline;">
Home
</div>
<div class="item" style="display:inline;">Blog: Kannu</div>
</div>
Thanks in advance
Assuming you're using jQuery, then use this :
$('#navigation').insertAfter( ".container" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="navigation">
<div class="item" style="display:inline;">
Home
</div>
<div class="item" style="display:inline;">Blog: Kannu</div>
</div>
<div class="row subheader">
<div class="container">
<div id="blogsubheader">My Blog</div>
</div>
</div>
</body>
</html>
As you want to change the DOM. First you need to clone the first section and store it in a variable. Then remove the first element from the DOM. And append this element after the 2nd element.
To do so using jQuery
var nav = $('#navigation').clone(true);
$('#navigation').remove();
nav.insertAfter('.subheader');
In JavaScript
var nav = document.getElementById('navigation');
var subHeader = document.getElementsByClassName('subheader');
subHeader[0].after(nav);
Here is the fiddle link https://jsfiddle.net/moshiuramit/xm85h29g/7/
How about this?
var navigation = document.getElementById('navigation');
var rowSubheader = document.getElementById('row-subheader');
rowSubheader.after(navigation);
You'll have to add an id here though, as I did:
<div class="row subheader" id="row-subheader">
https://jsfiddle.net/zmve7xyc/
If you are changing the order just for the view consider using Flex css property (after checking browser compatibility). DOM manipulation is an intensive operation and you shouldn't do it until absolute necessity.
Simply wrap both div in a wrapper div and toggle class for changing flex-direction of wrapper div
You can use appendTo also in JQuery.
Ex :
var nav = $('#navigation').clone(true);
$('#navigation').remove();
nav.appendTo('.subheader');
Any one knows a way to get all the URLs in a website using JavaScript?
I only need the links starting with the same domain name.no need to consider other links.
Well this will get all the same-host links on the page:
var urls = [];
for(var i = document.links.length; i --> 0;)
if(document.links[i].hostname === location.hostname)
urls.push(document.links[i].href);
If by site you mean you want to recursively get the links inside linked pages, that's a bit trickier. You'd have to download each link into a new document (for example in an <iframe>), and the onload check the iframe's own document for more links to add to the list to fetch. You'd need to keep a lookup of what URLs you'd already spidered to avoid fetching the same document twice. It probably wouldn't be very fast.
Or in es6
[...document.links].map(l => l.href)
Javascript to extract (and display) the domains, urls, and links from a page
The "for(var i = document.links.length; i --> 0;)" method is a good collection to work with. Here is a example to pulls it from specific parts of the html page.
You could alter it to select and filter to whatever you want. And then use the list however you want. I wanted to show a working example.
var re = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/i;
var reG = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/ig;
var printList = document.getElementById("domains");
var unorderedList = document.createElement("ul");
unorderedList.setAttribute("id", "domainsList");
unorderedList.setAttribute("class", "list-group");
printList.appendChild(unorderedList);
var domainsList = document.getElementById("domainsList");
var list = document.getElementsByTagName("a");
//console.log(list);
var listArray = Array.from(list);
//loop through the list
listArray.forEach(function(link){
//console.log(link.href);
//console.log(typeof(link.href));
var listItem = document.createElement("li");
listItem.setAttribute("class", "list-group-item domain");
domainsList.appendChild(listItem);
var str = link.href;
var match = str.match(reG);
var matchGroup = str.match(re);
//console.log(matchGroup[5]);
var domainNode = document.createTextNode("Domain: " + matchGroup[5]);
listItem.appendChild(domainNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var websiteNode = document.createTextNode("Website: " + matchGroup[3]);
listItem.appendChild(websiteNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var fullNode = document.createTextNode("Full Link: " + match);
listItem.appendChild(fullNode);
domainsList.appendChild(listItem);
unorderedList.appendChild(listItem)
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Pull Domains form a page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card-deck">
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 1</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 2</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 3</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 4</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 5</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 6</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 7</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 8</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 9</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 10</div></div>
</div>
<div id="domains"></div>
</body>
</html>
JSFiddle of a working copy
In Javascript:
(function(){
let links = [], l = document.links;
for(let i=0; i<l.length; i++) {
links.push(l[i].href);
}
return links;
})();
using jquery u can find all the links on the page that match a specific criteria
$("a[href=^domain.com]").each(function(){
alert($(this).attr("href"));
});