Handling of line breaks in different browsers

Source: Internet
Author: User

At first, we wanted to use string. split (); this method processes strings. Of course, the processing is to get data by row, and then replace the linefeed with "," to connect to the string. However, when we get the linefeed, but often defeated ~~ Frustrated ~

When querying network resources, I think the following statements are still reliable, which is highly consistent with my situation:

In the latest version of jquery, the value of text is used to obtain the nodevalue of the most basic textnode. That is to say, the difference between the value of text and the value of innertext lies in the difference between nodevalue and innertext:

The value of text () in the webpage code returns one character char (13), that is, "\ r", and innertext returns two characters char (13) + char (10) that is, "\ r \ n ".

Here is a strange problem:

When the webpage code contains a natural line change, text () can retrieve this line break. However, if innertext = innertext is assigned a value, the page does not change, but text () is used at this time () the value cannot be a line break. if you use text (text) to assign values, you can use text () to get a line break.

Assignment Rendering

1. innertext can use \ r or \ n to generate line breaks, but in IE8, continuous \ r and \ n will be combined into a line feed (which is consistent with the Orthodox understanding of carriage returns and line breaks ). however, no matter how \ r and \ n are combined in IE7, continuous line breaks cannot be produced. (I cried. I tested in IE6, IE7, IE8, Firefox, sogou, and Google browsers. Some of them failed, some of them succeeded, and the IE was the most tangled. The results of different versions were different)

In addition, the newline generated by innertext can only be one-way, that is, only the newline effect can be generated, but this linefeed cannot be captured again through JavaScript (whether innertext or text ).

2. in IE8, the carriage return \ r and line feed \ n have the same effect as the line feed. They are not merged and can be captured by JavaScript. the difference is that innertext captures \ n for independent \ n and \ r \ n for \ r \ n, \ r \ n is captured for independent \ r. (I believe that you may cry as soon as you see it .....)

There is a problem here. The standard line feed should be two characters \ r \ n, but if jquery is used to present this string in Pre, two line breaks (IE8) will be generated ). in IE7, \ n is converted into a space.
(If you haven't thought about crying, okay ~ I admit that you are so powerful .....)
 

Tab (\ t)

The value assignment and value assignment of the text method are no problem when processing the tab, while the value assignment of innertext cannot be \ t. The rendering effect of this assignment will become a space. if you use innertext to retrieve it again, you will find that \ t is converted to Char (32), and retrieving this \ t using text will become a strange value like char (160.

 

Use text or innertext

Whether to use text or innertext when presenting data depends on whether the line feed in your database is \ r, \ n or \ r \ n.

It is worth noting that in a naturally submitted form, the linefeed in the form field is an orthodox line feed, that is, each line feed (effect) after submission is a complete two character \ r \ n.

 

In addition, we also need to remind you that although the form field wrap is \ r \ n during normal submission, if you submit the form field through Ajax, the line feed will become \ n.

Because when the. Val () value is set, \ r characters will be automatically filtered out. (Yes, that's the solution. Just use jquery to unify it! I once again learned how powerful and useful jquery is ~~~)

In addition:

Using the split (); Method in JS, The result in IE is an array, and the result in Firefox is directly a string separated.

In this way, if you want to collect statistics, it seems convenient in IE, but if the current system is not cross-browser, it is also called a website, ah! A tough programmer ......

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.