A project initiated by the demand - textarea in line breaks and spaces

When we use the textarea edit the text in the foreground, and submit to a background with js, the spaces and line breaks is what we most need to consider. In the textarea inside, spaces and line breaks will be saved to /sand /n, if we foreground text input and textarea in the front display are inside, in fact, does not need to do anything, you write in the textarea which will follow the style before you edit time style, displayed correctly.

So if you need to edit text submitted textarea, from backstage after the return is not displayed in the textarea inside, then we need to consider treatment spaces and line breaks friends.

In fact, before the time of contact, there is no consideration of these issues, but also because of a recent project which has a demand like this, requiring users to enter text in the textarea, after submitting displayed on the page in the format of the article. Regardless of when the user enters the number of spaces to play, only the default each piece of text indented two characters, and to consider the form of poetry user uploads, that is, there may be two blank lines between each paragraph. In short words sum up, that is - to remove the spaces input by the user, to retain line breaks between paragraphs.

So I ended up approach is, when saving or no treatment, saved directly to the background. When displayed, after obtaining from the background to the text, remove all spaces in the text, and then displayed on the <pre>label inside.

Here I use a small example to indicate what textarea saved in a variety of situations and display. First, create a simple html page, in order to facilitate access to data and show that I introduced vue to process the data, to submit a binding button click event, then click OK, appear below. The basic page structure and js as follows:

<div class="app">
    <p>请输入内容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1"></textarea>
    <button>提交</button>
    <p>显示的内容：</p>
    <textarea name="t2" id="" cols="80" rows="8" v-model="text2"></textarea>
</div>

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

Processing spaces and line breaks are not shown in the inside textarea

This step is very simple, just click submit, you can see the effect, as shown below. In the case without making any treatment, it retains all the spaces and line breaks, save for re-editing.

Does not handle spaces and line breaks appear in the div inside

Just replace the second textarea into div, to the following figure. We can see the spaces and line breaks have not been processed out, directly ignored.

<div id="app">
    <p>请输入内容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>显示的内容：</p>
    <p>{{text2}}</p>
</div>

Processing spaces and line breaks do not appear in the pre tag inside

Div replace the pre tag, the text will be presented to display tag pre inside. pre element defines preformatted text. Surrounded by the text in the pre elements usually reserved spaces and line breaks, he is quite common application is used to display the code, in which technology sites and blog pages, pre tags are used to wrap the code block.

The effect can be seen from the figure below, pre tags can also be fully realized reserved space entered by the user and line, it seemed to be able to meet my basic needs. So the next question is, how to remove spaces, and automatically indent two characters.

<div id="app">
    <p>请输入内容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>显示的内容：</p>
    <pre>{{text2}}</pre>
</div>

So I try to set the css property directly to the pre tag text-index:2em;? This enables needs? The answer is clearly no, because the provisions of this attribute is block-level elements of the first line of text indents, from beginning to end and there is only a block-level element pre, obviously can not be achieved. And we also take into account the space entered by the user.

Replace the space reserved wrap

Since the direct display does not work, it seems, you have to deal with the text, then we deal with it. First try to remove all spaces, the first thought is the trim()method. The idea is, as divided by line breaks, to obtain each piece of text, and then trim()remove the spaces before and after the text method, using <p> tags to wrap each piece of text, with each segment and then <br>spliced together wrap label. At the same time, without prethe label to display text, the fragment directly after the processing of html inserted inside div tag, used here is the v-html vue property.

<div id="app">
    <p>请输入内容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>显示的内容：</p>
    <div v-html="text2" style="text-indent:2em;"></div>
</div>

// js部分
submitText(){
    let arr = [];
    this.text1.split('\n').forEach(item=>arr.push(`<p>${item.trim()}</p>`));
    this.text2 = arr.join('<br>');
}

As shown below, the basic realization of automatic indentation change and retain the line.

Here we enter a poem, add some style to see how the final results:

Then enter the section of the article, the article input when upset indentation, you can see no matter how we indent, the display is always indent two characters, then it needs to achieve it!