recherche

Maison >interface Web >js tutoriel >Comment convertir un titre en URL Slug en utilisant JavaScript ?

Comment convertir un titre en URL Slug en utilisant JavaScript ?

WBOY
WBOYavant
2023-09-10 18:45:081106parcourir

如何使用 JavaScript 将 Title 转换为 URL Slug？

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 "bb9345e55eb71822850ff156dfde57c8" avec un événement onclick() qui contient la fonction "convert()".

  • É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!

JavaScript html 字符串 事件 input 算法
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment supprimer les propriétés CSS à l’aide de JavaScript ?Article suivant：Comment supprimer les propriétés CSS à l’aide de JavaScript ?

Articles Liés

Voir plus