Categories
JavaScript Answers

How to read line by line of a text area HTML element?

Spread the love

Sometimes, we want to read line by line of a text area HTML element.

In this article, we’ll look at how to read line by line of a text area HTML element.

How to read line by line of a text area HTML element?

To read line by line of a text area HTML element, we can use the value property of the text area.

For instance, we write:

<textarea></textarea>

to add the text area.

Then we write:

const textarea = document.querySelector('textarea')

textarea.addEventListener('change', () => {
  const arrayOfLines = textarea.value.split("\n");
  for (const a of arrayOfLines) {
    console.log(a)
  }
})

We select the textarea with document.querySelector.

Then we call addEventListener to listen to the change event.

In the change event listener, we get the entered value string with textarea.value.

Then we call split with '\n' to split the string by the newline character into an array of strings.

And then we loop through each line with the for-of loop.

Conclusion

To read line by line of a text area HTML element, we can use the value property of the text area.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *