Dado un título y la tarea es convertir el título en un slug de URL usando JavaScript. En este artículo, usaremos HTML para diseñar la estructura básica del cuerpo, CSS se usará para establecer el estilo del cuerpo y JavaScript se usará para implementar la estructura lógica.
Requisito previo:
Básicamente, el siguiente programa convertirá un título en un URL Slug usando JavaScript.
Acercarse:
- Cree un formulario HTML con entrada para el título y salida para el slug de URL con identificadores únicos.
- Agrega algo de estilo CSS al elemento.
A continuación se muestra la implementación básica del código HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
fieldset.slugify {
color: #515151;
border: 1px solid #ccc;
padding: 15px;
}
.slugify legend {
font-size: 16px;
font-weight: 600;
padding: 0 10px;
}
.slugify input {
display: block;
padding: 8px;
margin: 8px;
}
.slug-output {
color: #05ab13;
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<form>
<fieldset class="slugify">
<legend>GeeksforGeeks</legend>
<label for="slug-source">Input Title: </label>
<input type="text" value="" id="slug-source" />
<label for="slug-target">URL Slug: </label>
<input type="text" value="" id="slug-target" />
<button type="button" onClick="myFunction()">
Convert
</button>
<p>
<span class="slug-ouput">
Generated URL Slug
</span>:
<span id="slug-target-span"></span>
</p>
</fieldset>
</form>
</body>
</html>
- Aquí, hemos usado la función replace() en JavaScript para hacer un slug de string.
- La string de slug creada se puede usar más en las URL.
A continuación se muestra la implementación del código JavaScript:
Javascript
<script>
function myFunction() {
var a = document.getElementById("slug-source").value;
var b = a.toLowerCase().replace(/ /g, '-')
.replace(/[^\w-]+/g, '');
document.getElementById("slug-target").value = b;
document.getElementById("slug-target-span").innerHTML = b;
}
</script>
Ejemplo: En este ejemplo, combinaremos las dos secciones de código anteriores (código HTML y JavaScript) para convertir el título en un slug de URL.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
fieldset.slugify {
color: #515151;
border: 1px solid #ccc;
padding: 15px;
}
.slugify legend {
font-size: 16px;
font-weight: 600;
padding: 0 10px;
}
.slugify input {
display: block;
padding: 8px;
margin: 8px;
}
.slug-output {
color: #05ab13;
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<form>
<fieldset class="slugify">
<legend>GeeksforGeeks</legend>
<label for="slug-source">Input Title: </label>
<input type="text" value="" id="slug-source" />
<label for="slug-target">URL Slug: </label>
<input type="text" value="" id="slug-target" />
<button type="button" onClick="myFunction()">
Convert
</button>
<p>
<span class="slug-ouput">Generated URL Slug</span>:
<span id="slug-target-span"></span>
</p>
</fieldset>
</form>
<script type="text/javascript">
function myFunction() {
var a = document.getElementById("slug-source").value;
var b = a.toLowerCase().replace(/ /g, '-')
.replace(/[^\w-]+/g, '');
document.getElementById("slug-target").value = b;
document.getElementById("slug-target-span").innerHTML = b;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sankalpsharma424 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA