Código de JavaScript - Generador de breadcrumb (migas de pan)

Imágen de perfil
Val: 746
Bronce
Ha aumentado su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Generador de breadcrumb (migas de pan)gráfica de visualizaciones


JavaScript

Publicado el 12 de Diciembre del 2019 por katas
587 visualizaciones desde el 12 de Diciembre del 2019
Crear un generado de breadcram que dada una url devuelva el código html para publicar en la web.

A tener en cuenta:
1.- El texto de los enlaces se tiene que poner en mayúsculas
2.- En el nombre del dominio se pone HOME
3.- Si solo existe el dominio no tiene que ser un enlace
4.- Si el ultimo elemento es un nombre de archivo, eliminar el punto y extensión del archivo (.html, .php, ...), interrogantes (?) o anchors (#)...
5.- Si el enlace tiene mas de 30 caracteres, quitar del contenido las palabras ["the", "of", "in", "from", "by", "with", "and", "or", "for", "to", "at", "a"] y mostrar únicamente las iniciales del resto de palabras.
6.- Si un enlace dispone de guiones, no ponerlos en el texto de la url.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
generateBC("mysite.com/", " + ") // <span class="active">HOME</span>
 
generateBC("https://mysite.com/", " + ") // <span class="active">HOME</span>
 
generateBC('http://github.com/biotechnology-by-research-eurasian-insider-meningitis', ' # '); // <a href="/">HOME</a> # <span class="active">BREIM</span>
 
generateBC("mysite.com/pictures/holidays.html", " : "); // <a href="/">HOME</a> : <a href="/pictures/">PICTURES</a> : <span class="active">HOLIDAYS</span>
 
generateBC("www.codewars.com/users/GiacomoSorbi", " / "); // <a href="/">HOME</a> / <a href="/users/">USERS</a> / <span class="active">GIACOMOSORBI</span>
 
generateBC("www.microsoft.com/important/confidential/docs/index.htm#top", " * "); // <a href="/">HOME</a> * <a href="/important/">IMPORTANT</a> * <a href="/important/confidential/">CONFIDENTIAL</a> * <span class="active">DOCS</span>
 
generateBC("mysite.com/very-long-url-to-make-a-silly-yet-meaningful-example/example.htm", " > "); // <a href="/">HOME</a> > <a href="/very-long-url-to-make-a-silly-yet-meaningful-example/">VLUMSYME</a> > <span class="active">EXAMPLE</span>
 
generateBC("www.very-long-site_name-to-make-a-silly-yet-meaningful-example.com/users/giacomo-sorbi", " + "); // <a href="/">HOME</a> + <a href="/users/">USERS</a> + <span class="active">GIACOMO SORBI</span>

1

Publicado el 12 de Diciembre del 2019gráfica de visualizaciones de la versión: 1
588 visualizaciones desde el 12 de Diciembre del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function generateBC(url, separator) {
 
    // remove the element previouse // and remove empty elements
    let arr=url.split("//").pop().split("/").filter(el=>el);
 
    // if last element is INDEX than removed
    if (clearFile(arr[arr.length-1])=="INDEX") {
        arr.pop();
    }
 
    return arr.map((el, index, arr)=>{
        if (index==arr.length-1) {
            if (index==0) {
                return html.active("HOME");
            } else {
                return html.active(clearUrl(clearFile(el)));
            }
        }
        if (index==0) {
            return html.link("/", "HOME");
        }
        let res=arr.slice(1,index+1);
        return html.link("/"+(res.join("/"))+"/", clearUrl(el));
    }).join(separator);
}
 
let html = {
  link: (link,text) => `<a href="${link}">${text}</a>`,
  active: text => `<span class="active">${text}</span>`,
}
 
/**
 * Function to remove the content from ., ? or # to the end
 *
 * @param string fileName
 *
 * @return string
 */
function clearFile(fileName) {
    const end=fileName.search(/\.|\?|#/);
    return end!=-1 ? fileName.substring(0, end).toUpperCase() : fileName.toUpperCase();
}
 
/**
 * Function to remove words and return firsts words is length is greather than 30
 *
 * @param string url
 *
 * @return string
 */
function clearUrl(url) {
    const remove=["THE", "OF", "IN", "FROM", "BY", "WITH", "AND", "OR", "FOR", "TO", "AT", "A"];
    return url.length>30 ? url.toUpperCase().split("-").filter(el=>remove.includes(el)==false).map(el=>el.charAt(0)).join(''): url.toUpperCase().split("-").join(' ');
}



Comentarios sobre la versión: 1 (0)


No hay comentarios
 

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5720