Heim  >  Artikel  >  Web-Frontend  >  So legen Sie in Javascript jede Textzeile auf dieselbe Zeichenfolge fest

So legen Sie in Javascript jede Textzeile auf dieselbe Zeichenfolge fest

PHPz
PHPzOriginal
2023-04-06 09:08:36551Durchsuche

JavaScript ist eine häufig verwendete Programmiersprache, die häufig zum Entwickeln von Webseiten und Website-Anwendungen verwendet wird. In diesem Artikel stellen wir vor, wie Sie mithilfe von JavaScript jede Textzeile auf dieselbe Zeichenfolge setzen und so Ihren Text schöner und geordneter gestalten.

Im täglichen Leben müssen wir oft mehrere Textzeilen nach denselben Regeln formatieren. Beispielsweise werden auf einigen Websites und Anwendungen, die wir häufig sehen, alle Titel, Autoren, Daten und andere Informationen linksbündig oder zentriert angezeigt, wodurch die Seite geordneter und aufgeräumter aussehen kann. Wenn Sie nicht wissen, wie Sie diese Funktionalität implementieren, können Sie dies mit JavaScript tun.

Zuerst müssen wir unseren eigenen Text vorbereiten. Wir können einer HTML-Seite ein div-Tag hinzufügen, das mehrere Inhaltszeilen enthält, wie unten gezeigt:

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

Hier verwenden wir p-Tags, um jede Textzeile darzustellen, und fügen diese p-Tags als Unterelemente zu einem Text mit der ID hinzu „text“ im div-Tag.

Als nächstes müssen wir JavaScript verwenden, um jede Textzeile festzulegen. Wir können zuerst den Verweis auf das div-Tag über die Methode getElementById abrufen und dann alle darin enthaltenen untergeordneten Elemente über das Attribut childNodes abrufen, d. h. das p-Tag, das jeder Textzeile entspricht. Der Code sieht so aus:

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

Dann können wir jedes Tag durchlaufen und seinen Textinhalt durch dieselbe Zeichenfolge ersetzen. Bei diesem Vorgang müssen wir auf Leerzeichen und Zeilenumbrüche achten. Wenn diese Leerzeichen und Zeilenumbrüche nicht verarbeitet werden, kann das Endergebnis falsch ausgerichtet sein. Daher müssen wir die Methode trim() verwenden, um Leerzeichen und Zeilenumbrüche vor und nach der Zeichenfolge zu entfernen. Der Code lautet wie folgt:

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

In diesem Beispiel verwenden wir das textContent-Attribut, um den in jedem p-Tag enthaltenen Textinhalt abzurufen, und verwenden dann die Methode .trim(), um die führenden und nachgestellten Leerzeichen sowie Zeilenumbrüche aus dem zu entfernen Text. Ändern Sie abschließend jede Textzeile in die Form „String festlegen“ + Text, indem Sie das textContent-Attribut ändern.

Schließlich können wir auf der Seite sehen, dass jede Textzeile derselben Zeichenfolge folgt. Diese Zeichenfolge kann je nach Bedarf festgelegt werden, beispielsweise auf „-“, „|“ oder andere Symbole. Wenn Sie den Zeilentext formatieren möchten, können Sie auch die entsprechenden Stileinstellungen im JavaScript-Code hinzufügen.

In diesem Artikel haben wir vorgestellt, wie man mit JavaScript jede Textzeile auf die gleiche Zeichenfolge setzt. Durch die obige Code-Implementierung können wir unseren Text geordneter und schöner gestalten. Wenn Sie mehr über JavaScript erfahren möchten, können Sie auf relevanten Websites und Büchern nach relevanten Informationen suchen.

Das obige ist der detaillierte Inhalt vonSo legen Sie in Javascript jede Textzeile auf dieselbe Zeichenfolge fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn