Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Generador de breadcrumb (migas de pan)

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

Volver
Agregar Código Fuente
<<>>
Imágen de perfil
Val: 2.288
Plata
Ha mantenido su posición 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 (200 códigos)
3.315 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
3.316 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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s5720