Comment convertir un titre en URL Slug en utilisant JavaScript ?-js tutoriel-php.cn

Comment convertir un titre en URL Slug en utilisant JavaScript ?

WBOY

Libérer： 2023-09-10 18:45:08

avant

1055 Les gens l'ont consulté

如何使用 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 "
Étape 2 - Créez maintenant une fonction fléchée « convertir() » en tant que JavaScript interne de la page HTML.

convert=()=>{}

Copier après la connexion

É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;

Copier après la connexion

É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();

Copier après la connexion

Étape 5 - Supprimez maintenant les espaces de début et de fin du titre à l'aide de la fonction « trim() ».

t.trim();

Copier après la connexion

É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, '-');

Copier après la connexion

Étape 7 - L'URL Slug est prête et affichée sur l'écran du navigateur.

document.getElementById('urlSlug').value = slug;

Copier après la connexion

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>

Copier après la connexion

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!