Comment convertir un titre en URL Slug en utilisant JavaScript ?
Vue d'ensemble
Convertir les titres en URL Slug également connu sous le nom de "Slugify"Titres. Un slug d’URL est un titre descriptif et facile à lire. Il est ajouté à l'URL de la page, qui raconte l'histoire de la page actuelle, car les slugs sont auto-descriptifs. Ainsi, la conversion d'en-tête en slug à l'aide de JavaScript peut être réalisée à l'aide de certaines fonctions JavaScript telles que toLowerCase(), replace(), trim().
Algorithme
Étape 1 - Créez une page HTML contenant deux balises d'entrée et ajoutez-y des attributs d'identification tels que "titre" et "urlSlug" respectivement, le premier élément d'entrée recevra l'entrée de l'utilisateur en tant que titre et l'autre. L'étiquette affichera le Limace d'URL. Créez également un bouton HTML "
Étape 2 - Créez maintenant une fonction fléchée « convertir() » en tant que JavaScript interne de la page HTML.
convert=()=>{}
Étape 3 - Accédez à la valeur de la première balise d'entrée avec l'identifiant "document.getElementById("title")".value et stockez cette valeur dans une variable.
document.getElementById('title').value;
Étape 4 - Convertissez la valeur reçue du titre en minuscules à l'aide de la fonction "toLowerCase()" de la chaîne. "t" est la variable qui reçoit le titre.
t.toLowerCase();
Étape 5 - Supprimez maintenant les espaces de début et de fin du titre à l'aide de la fonction « trim() ».
t.trim();
Étape 6 - Utilisez la fonction "replace()" avec motif pour remplacer tous les espaces du titre par des tirets "-"
title with “-” dash, using “replace()” function with a pattern t.replace(/[^a-z0-9]+/g, '-');
Étape 7 - L'URL Slug est prête et affichée sur l'écran du navigateur.
document.getElementById('urlSlug').value = slug;
Exemple
Dans cet exemple, nous obtenons le titre de l'utilisateur en entrée. Lorsque l'utilisateur saisit un titre et clique sur le bouton, la fonction Convert() est déclenchée, qui modifie la valeur du titre en minuscules, puis modifie tous les espaces de début et de fin du titre en minuscules. Ensuite, dans le titre donné, les espaces seront remplacés par des tirets (-) et le slug de l'URL sera affiché sur la balise d'entrée en lecture seule du navigateur.
<html lang="en">
<head>
<title>Convert title to URL Slug</title>
</head>
<body>
<h3>Title to URL Slug Conversion</h3>
<label>Title:</label>
<input type="text" id="title" value="" placeholder="Enter title here"> <br />
<label>URL Slug:</label>
<input type="text" id="urlSlug" style="margin:0.5rem 0;border-radius:5px;border:transparent;padding: 0.4rem;color: green;" placeholder="Slug will appear here..." readonly><br />
<button onclick="convert()" style="margin-top: 0.5rem;">Covert Now</button>
<script>
// This function converts the title to URL Slug
convert = () => {
var t = document.getElementById('title').value;
t = t.toLowerCase(); //t is the title received
t = t.trim(); // trim the spaces from start and end
var slug = t.replace(/[^a-z0-9]+/g, '-'); // replace all the spaces with "-"
document.getElementById('urlSlug').value = slug;
document.getElementById('urlSlug').style.border="0.1px solid green";
}
</script>
</body>
</html>
Dans le résultat de l'exemple ci-dessus, le titre saisi par l'utilisateur est « Article du point du didacticiel ». Après avoir cliqué sur "Convertir maintenant", le titre sera converti en un slug d'URL, c'est-à-dire "Article de point de didacticiel". Qui utilise la fonction trim() pour supprimer les espaces de fin et les remplacer par des traits d’union.
Conclusion
Le slug Uniform Resource Locator (URL) aide à améliorer le classement de recherche de votre page. Par conséquent, le slug de l'URL doit être dans l'URL, et comme tous les mots de l'URL sont en minuscules, le titre est également d'abord converti en minuscules. Pour faire attention aux slugs dans les URL, prenez simplement n'importe quel article, blog ou tout autre contenu du site Web et observez le point final de l'URL, s'il apparaît dans la phrase, il se terminera par le même résultat que notre exemple ci-dessus.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
