Estoy trabajando con una serie de URL y para cada URL quiero encontrar una imagen correspondiente al dominio del sitio. mi primer intento fue
const url = new URL(props.url); const platform = url.hostname.split(".")[1]; console.log(platform) const platform_logos = { "codechef": "images/chef.png", "withgoogle": "images/google.png", . . . "codeforces": "images/codeforces.png", } let platform_logo = platform_logos[platform];pero no funciona con url de tipo 'https://momo2022fr.hackerearth.com', así que tuve que recurrir a
let platform_logo = "images/code.png" if (url.includes("hackerearth")) { platform_logo = "images/hackerearth.png" } else if (url.includes("hackerrank")) { platform_logo = "images/hackerrank.png" } else if (url.includes("codeforces")) { platform_logo = "images/codeforces.png" } else if (url.includes("codechef")) { platform_logo = "images/chef.png" } else if (url.includes("atcoder")) { platform_logo = "images/atcoder.png" } else if (url.includes("leetcode")) { platform_logo = "images/leetcode.png" } else if (props.url.includes("withgoogle")) { platform_logo = "images/google.png" }¿Hay alguna forma mejor de escribir el código a continuación, parece que viola DRY?
Podría hacer lo mismo que en su primera solución y almacenar la asignación de la subcadena a la ruta de la imagen en un objeto:
const platform_logos = { "hackerearth": "images/hackerearth.png", "hackerrank": "images/hackerrank.png", "codeforces": "images/codeforces.png", "codechef": "images/chef.png", "atcoder": "images/atcoder.png", "leetcode": "images/leetcode.png", "withgoogle": "images/google.png" };Luego, podría iterar sobre los pares clave-valor en su objeto para encontrar la clave que es parte de la URL y devolverla una vez que coincida:
function getLogo(url) { for(const [key, value] of Object.entries(platform_logos)) { if(url.contains(key)) { return value; } } } let platform_logo = getLogo(url);Puede cambiar la forma en que está leyendo la URL para obtener solo el dominio raíz.
location.hostname.split('.').reverse().splice(0,2).reverse().join('.').split('.')[0] Este código daría hackerearth para https://momo2022fr.hackerearth.com/ .
Así que hay varias formas de lograr esto. Estos son sólo dos de la parte superior de mi cabeza.
Analizar la url y usar un switch() para determinar el resultado, con respaldo si no se encuentra ninguno.
const url = new URL("https://www.withgoogle.com/search?q=test"); const sites = [ "hackerearth", "hackerrank", "codeforces", "codechef", "atcoder", "leetcode", "withgoogle", ]; console.info(url.hostname); const site = url.hostname.match(new RegExp(`${sites.join("|")}`)); let logo = ""; switch (site[0]) { case "hackerearth": logo = "images/hackerearth.png"; break; case "hackerrank": logo = "images/hackerrank.png"; break; case "codeforces": logo = "images/codeforces.png"; break; case "codechef": logo = "images/chef.png"; break; case "atcoder": logo = "images/atcoder.png"; break; case "leetcode": logo = "images/leetcode.png"; break; case "withgoogle": logo = "images/google.png"; break; default: logo = "images/code.png"; break; } console.info(logo);Luego está la forma moderna, con menos código y programando el respaldo.
// const url = new URL("https://eee.com/test"); const url = new URL("https://www.withgoogle.com/search?q=test"); const sites = { hackerearth: "images/hackerearth.png", hackerrank: "images/hackerrank.png", codeforces: "images/codeforces.png", codechef: "images/chef.png", atcoder: "images/atcoder.png", leetcode: "images/leetcode.png", withgoogle: "images/google.png", default: "images/code.png", }; let site = url.hostname.match(new RegExp(`${Object.keys(sites).join("|")}`)); if (site === null) { site = "default"; } console.info(site, sites[site]);