In this blog post you’ll learn how to wrap each character or letter of string with an HTML tag using JavaScript. We'll see 2 approaches to wrap the characters or letters of text with particular HTML tag.
See how it looks:
We will wrap each character or letter of this paragraph with a span tag using JavaScript.
Here, I've wrapped each character of the paragraph with a span tag. You can wrap characters in any other HTML tag (you can choose).
The paragraph inside the HTML.
HTML
<p class="text">Hello welcome to maketechstuff.com</p> Output:
See the console, look same as HTML written.
After wrapping the paragraph letters with span tag.
JavaScript Methods used:
split()
array.map()
join()
JavaScript loop used:
For loop
Wrap Each Characters of String or Text With another HTML tag.
Let's wrap each letter of paragraph with a span tag step by step.
Step 1: Create the paragraph.
Create a simple paragraph with text inside.
HTML
<p class="text">Hello welcome to maketechstuff.com</p> In the console it looks the same as in html.
Step 2: Get the paragraph with JavaScript.
Now Let's select the HTML element with text, Which letters we want to wrap inside the another HTML tag.
JavaScript
let text = document.querySelector(".text"); Step 3: Split the paragraph text to array (array of characters).
After selecting the tag we split into an array of characters using split() method.
JavaScript
text.innerHTML = text.innerHTML.split("") Step 4: Wrap each letter or character of a paragraph with a span tag.
We’ll see 2 Approaches.
Approach 1: Combining split(), map(), join() method.
After converting the text into an array by split method we take that array and wrap each letter inside the span tag (you can wrap in any other tag) using array.map() method.
Now we wrap each letter of paragraph with a span tag using array.map method and add all the span tags inside the same paragraph. You can say we are going to replace the innerHTML with just text to texts wrapped with span tags.
As we split the paragraph text with the split method it converts into an array and has a comma between the characters to return as a previous paragraph text we have to use the join method.
JavaScript
text.innerHTML = text.innerHTML.split("").map((letter, index) => `<span>` + letter + `</span>`).join(""); Output:
There is another way to wrap the letter with a span tag or any other HTML tag.
Approach 2: With for loop.
In the loop we take each letter of the paragraph and wrap inside the span tag (you can wrap in any other tag).
JavaScript
let text = document.querySelector(".text");
let array = text.innerHTML;
text.innerHTML = "";
for (let i = 0; i < array.length; i++) {
const element = array[i];
text.innerHTML += `<span>` + element + `</span>`
}
Output:
Final code:
So that's how you can wrap each letter of a string with any HTML tag you want using JavaScript. If you have any query or suggestion you can write in the comment section.
Share your thoughts.