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
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"));
});
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 keep having the same issue again and again : When I add a task, it gets added to the localStorage correctly. But once I have multiple tasks and I click complete on a random one, sometimes it happens that the LocalStorage removes the task before it or after it. I can't figure out a way how to let it work.
let addBtn = document.getElementById("addButton");
let textInput = document.getElementById("textInput");
let mainList = document.getElementById("mainList");
let storage = JSON.parse(localStorage.getItem("toDos")) || [];
if (storage.length != 0){
for (let i=0; i<storage.length;i++){
addTask(mainList, storage[i]);
};
};
function addTask(list,task){
var newTask = document.createElement("li");
newTask.textContent=task
newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";
addCompleteBtn(newTask);
list.appendChild(newTask);
}
function addCompleteBtn (newTask){
let completeBtn = document.createElement("button");
completeBtn.className="btn btn-success completeBtn";
completeBtn.textContent="Completed";
newTask.appendChild(completeBtn);
};
addBtn.addEventListener("click", ()=>{
if(textInput.value === ""){
alert("Error: The field is either empty or you entered more than 100 characters!");
}else{
storage.push(textInput.value);
addTask(mainList, textInput.value);
textInput.value="";
localStorage.setItem("toDos",JSON.stringify(storage));
};
});
mainList.addEventListener("click",(evt)=>{
if (evt.target.className==="btn btn-success completeBtn") {
let listItem = evt.target.parentNode;
let mainUl = listItem.parentNode;
let toBeRemoved = listItem.textContent;
storage.splice(storage.indexOf(toBeRemoved),1);
mainUl.removeChild(listItem);
localStorage.setItem("toDos",JSON.stringify(storage));
};
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>To-do-list App</title>
</head>
<body>
<div class="jumbotron bg-info">
<div class="container">
<h1 class="display-4 text-center">Task List</h1>
<p class="lead text-center">Click on the Add button to add a task</p>
</div>
</div>
<div class="container">
<div class="firstInput input-group mb-5">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button" id="addButton">Add Task</button>
</div>
<input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">
</div>
</div>
<ul class='tasksList container' id="mainList">
</ul>
<script src="script.js"></script>
</body>
</html>
Shows all the values in the LocalStorage
Once task 2 is removed, task 3 is removed from the Storage instead
this is the specific part that causes me issues :
mainList.addEventListener("click",(evt)=>{
if (evt.target.className==="btn btn-success completeBtn") {
let listItem = evt.target.parentNode;
let mainUl = listItem.parentNode;
let toBeRemoved = listItem.textContent;
/* This is the part of code causing me issues
storage.splice(storage.indexOf(toBeRemoved),1);
*/
mainUl.removeChild(listItem);
localStorage.setItem("toDos",JSON.stringify(storage));
};
});
The problem is here let toBeRemoved = listItem.textContent;,this will return the text content of all elements inside that li. So if you add a task named 'Task 1', when you press Completed the value of toBeRemoved will be Task 1Completed since this will return the text of the button as well since your button is a child of the li.
So change let toBeRemoved = listItem.textContent; to let toBeRemoved = listItem.childNodes[0].nodeValue; and you should be fine, this will get the text of the li only.