Maison > interface Web > tutoriel CSS > Comment puis-je mettre du texte en minuscule puis en majuscule en utilisant CSS et JavaScript ?

Comment puis-je mettre du texte en minuscule puis en majuscule en utilisant CSS et JavaScript ?

Mary-Kate Olsen
Libérer: 2024-11-01 12:09:02
original
553 Les gens l'ont consulté

How can I lowercase and then capitalize text using CSS and JavaScript?

Mise en majuscule du texte après la mise en minuscule avec CSS et JavaScript

Il est possible de mettre d'abord en minuscule, puis de mettre en majuscule le texte en utilisant CSS ou JavaScript.

Méthode CSS

CSS peut être utilisé pour mettre en majuscule la première lettre de chaque mot à l'aide de la propriété text-transform. En définissant text-transform:capitalize;, le texte sera automatiquement converti en minuscules d'abord, puis la première lettre de chaque mot sera en majuscule.

Exemple :

<code class="css">.className {
    text-transform: capitalize;
}</code>
Copier après la connexion

Ce CSS garantira que tout le texte de l'élément avec la classe className sera d'abord en minuscule, puis en majuscule.

Méthode JavaScript

JavaScript offre une approche plus flexible pour mettre le texte en majuscule après la mise en minuscule. La méthode toLowerCase() peut être utilisée pour convertir tout le texte en minuscules, suivie de la méthode replace() pour mettre en majuscule la première lettre de chaque mot.

Exemple :

<code class="js">function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');</code>
Copier après la connexion

Dans cet exemple, la fonction capitalize() convertit d'abord la chaîne d'entrée s en minuscules à l'aide de toLowerCase(). Ensuite, il utilise la méthode replace() avec un modèle d'expression régulière (/b./g) pour trouver la première lettre de chaque mot (indiquée par les limites des mots b), et la fonction de rappel anonyme function(a){ renvoie a. toUpperCase(); }, met en majuscule la lettre correspondante.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal