Comment définir chaque ligne de texte sur la même chaîne en javascript

JavaScript est un langage de programmation couramment utilisé pour développer des pages Web et des applications de sites Web. Dans cet article, nous expliquerons comment utiliser JavaScript pour définir chaque ligne de texte sur la même chaîne, rendant ainsi votre texte plus beau et plus ordonné.

Dans la vie quotidienne, nous devons souvent formater plusieurs lignes de texte selon les mêmes règles. Par exemple, sur certains sites Web et applications que nous voyons souvent, tous les titres, auteurs, dates et autres informations seront alignés à gauche ou au centre, ce qui peut rendre la page plus ordonnée et plus ordonnée. Si vous ne savez pas comment implémenter cette fonctionnalité, vous pouvez le faire en utilisant JavaScript.

Tout d’abord, nous devons préparer notre propre texte. Nous pouvons ajouter une balise div contenant plusieurs lignes de contenu à une page HTML, comme indiqué ci-dessous :

<div id="text">
  <p>第一行文字</p>
  <p>第二行文字</p>
  <p>第三行文字</p>
  <p>第四行文字</p>
  <p>第五行文字</p>
</div>

Ici, nous utilisons des balises p pour représenter chaque ligne de texte, et ajoutons ces balises p comme sous-éléments à un texte avec l'identifiant. " dans la balise div.

Ensuite, nous devons utiliser JavaScript pour définir chaque ligne de texte. Nous pouvons d'abord obtenir la référence à la balise div via la méthode getElementById, puis obtenir tous les éléments enfants qu'elle contient via son attribut childNodes, c'est-à-dire la balise p correspondant à chaque ligne de texte. Le code ressemble à ceci :

var textDiv = document.getElementById("text");
var textNodes = textDiv.childNodes;

Ensuite, nous pouvons parcourir chaque balise et remplacer leur contenu textuel par la même chaîne. Au cours de ce processus, nous devons faire attention aux espaces et aux nouvelles lignes. Si ces espaces et nouvelles lignes ne sont pas traités, le résultat final peut être mal aligné. Nous devons donc utiliser la méthode trim() pour supprimer les espaces et les nouvelles lignes avant et après la chaîne. Le code est le suivant :

for(var i=0; i<textNodes.length; i++) {
  var text = textNodes[i].textContent.trim();
  textNodes[i].textContent = "设置的字符串" + text;
}

Dans cet exemple, nous utilisons l'attribut textContent pour obtenir le contenu du texte contenu dans chaque balise p, puis utilisons la méthode .trim() pour supprimer les espaces de début et de fin et les caractères de nouvelle ligne du texte. Enfin, chaque ligne de texte est modifiée sous la forme de "set string" + texte en modifiant l'attribut textContent.

Enfin, on peut voir sur la page que chaque ligne de texte suit la même chaîne. Cette chaîne peut être définie en fonction des besoins, par exemple, vous pouvez la définir sur "-", "|" ou d'autres symboles. Si vous souhaitez styliser le texte de la ligne, vous pouvez également ajouter les paramètres de style correspondants dans le code JavaScript.

Dans cet article, nous avons présenté comment utiliser JavaScript pour définir chaque ligne de texte sur la même chaîne. Grâce à l'implémentation du code ci-dessus, nous pouvons rendre notre texte plus ordonné et plus beau. Si vous souhaitez en savoir plus sur JavaScript, vous pouvez accéder aux sites Web et aux livres pertinents pour trouver des informations pertinentes.

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!