Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to deal with line breaks and spaces in textarea". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to deal with line breaks and spaces in textarea" can help you solve your doubts.

In textarea, spaces and line breaks will be saved as / s and / n. If the text entered and displayed in the foreground is in textarea, there is no need to do any processing. The style you wrote in textarea will be displayed correctly according to the style you edited before.

So if you need textarea to edit the submitted text, after returning from the background, it is not displayed in the textarea, then you need to consider dealing with spaces and line breaks.

In fact, I did not consider these issues at all when I contacted you before, and it is also because there is such a requirement in a recent project that users are required to enter text in textarea and display it on the page in the format of an article after submission. No matter how many spaces the user types, the default is to indent only 2 characters per paragraph, taking into account the form of poetry uploaded by the user, that is, there may be two lines of white space between each paragraph. To sum up, one sentence summary is to remove the spaces entered by the user and retain the line breaks between paragraphs.

Then my ultimate approach is to save it directly to the background without doing any processing. When displayed, after getting the text from the background, remove all spaces from the text and display it in the tag.

Here I will use a small example to illustrate the preservation and display of textarea in various situations. First create a simple html page. To facilitate data acquisition and display, I introduce vue to process the data, bind a click event to the submit button, click OK, and display it below. The basic page structure and js are as follows:

Please enter:

Submit

What is displayed:

/ / js part const vm = new Vue ({el:'#app', data: {text1:'', text2:''}, methods: {submitText () {this.text2 = this.text1;})

Do not handle spaces and line breaks are displayed in textarea

This step is very simple, click submit directly, you can see the effect, as shown in the following figure. Without any processing, all spaces and line breaks are retained, which is suitable for saving and editing.

Do not handle spaces and line breaks are displayed in div

Replace the second textarea with div, and the effect is as follows. You can see that spaces and newline characters are not processed and are directly ignored.

Please enter:

Submit

What is displayed:

{{text2}}

Do not handle spaces and line breaks are displayed in the pre tag

Replace div with the pre tag and display the submitted text in the pre tag. The pre element defines preformatted text. Text surrounded by pre elements usually leaves spaces and newline characters, and its more common application is to display code. In technical websites and blog pages, pre tags are used to wrap code blocks.

As you can see from the effect of the following figure, the pre tag can also fully retain the spaces and line breaks entered by the user, which seems to meet my basic needs. Then the next question is how to remove spaces and automatically indent 2 characters.

Please enter:

Submit

What is displayed:

{{text2}}

Then I'll try to set the css attribute text-index:2em;? directly to the pre tag. Can this meet the demand? The answer is obviously no, because this attribute specifies the indentation of the first line text of a block-level element, and there is only one block-level element pre from beginning to end, which obviously cannot be implemented. And we also have to take into account the spaces entered by the user.

Replace spaces and keep line breaks

Since direct display doesn't work, it seems that we still have to deal with the text, so let's deal with it. Try it first, remove all the spaces, and the first thing that comes to mind is the trim () method. The idea is to get each piece of text by dividing the newline character, and then use the trim () method to remove the spaces before and after the text, using the

The label wraps each paragraph of text and then uses each paragraph

Newline labels are spliced together. At the same time, instead of using the pre tag to display the text, insert the processed html fragment directly into the div tag, where the v-html attribute of vue is used.

Please enter:

Submit

What is displayed:

/ / js part submitText () {let arr = []; this.text1.split ('') .forEach (item= > arr.push (`)

${item.trim ()}

`); this.text2 = arr.join ('

After reading this, the article "how to deal with line breaks and blanks in textarea" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.