Here is my parser:
let getFavicon = function () {
let favicons = [];
let nodeList = document.getElementsByTagName('link');
for (let i = 0; i < nodeList.length; i++) {
if (
nodeList[i].getAttribute('rel') === 'icon' ||
nodeList[i].getAttribute('rel') === 'shortcut icon'
) {
favicons.push(nodeList[i].getAttribute('href'));
}
}
return favicons;
};
It returns an array of URLs, with all URL favicons.
How can the user get these favicons? when entering the URL in the input and get the favicons.
Like google labels, we enter the URL and get the labels with the favicon
How can I do the same thing?
Advertisement
Answer
I hope this example would help:
let favicons = [];
let nodeList = document.getElementsByTagName("link");
for (let i = 0; i < nodeList.length; i++) {
if ((nodeList[i].getAttribute("rel") === "icon") || (nodeList[i].getAttribute("rel") === "shortcut icon")) {
favicons.push(nodeList[i].getAttribute("href"))
}
}
function searchStringInArray (str, strArray) {
for (var j=0; j<strArray.length; j++) {
if (strArray[j].match(str)) return strArray[j];
}
return -1;
}
const searchTextBox = document.querySelector('input[name="search"]')
searchTextBox.addEventListener('keyup', (e) => {
const searchResult = searchStringInArray(e.target.value, favicons)
if(searchResult != -1){
document.querySelector('.icon').style.background = `url('${searchResult}')`
}
}).icon {
height: 35px;
width: 35px;
display: block;
}<head> <link rel="shortcut icon" href="https://abs.twimg.com/favicons/twitter-pip.ico" type="image/x-icon"> <link rel="icon" href="https://www.youtube.com/s/desktop/6e57b52d/img/favicon_48x48.png" sizes="48x48"> <link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"> </head> <input name="search" type="text"> <span class='icon'></span>