Retained the line feed and space style of the multi-line text box, and escaped the HTML-tagged angle brackets.

Source: Internet
Author: User
ArticleDirectory
    • I. source of demand
    • Ii. Optimization Scheme
    • 3. Example and source code

This article uses JavaScript For demonstration, which does not affect your actual application in the project. Because of the ideas I provide, you can easily implement it in your own language, this is usually a background language, and you can almost copy the regular expression provided below, because the regular expression is generic.

I. source of demand

If you need to provide a message entry in a website project, you only use a common multi-line text box (textarea) to collect the message content, users do not like entering HTML tags or even scripts. Like in my release of Douban, if you haven't added a review, you can directly store it to the database. In the end, you can directly read the database content when the page output is displayed, you will see that all texts that are meant to be segmented are connected together. If the text box content also contains HTML tags, the results will also be displayed. I believe this is not the expected effect, so you have to change the linefeed "\ n" in textarea to "<br/>" for the page to be displayed normally, correspondingly, the blank space (the full-angle space can not be processed, I found that 163 blog is doing this) and the angle brackets of the HTML Tag are also converted, which is easy to think of using the search and replacement method.

Ii. Optimization Scheme

If \ n is converted to <br/> and then stored in the database when the information is published, the database will be read and displayed on the page, however, if you want to edit the previous information, you need to convert the <br/> content read from the database into \ n in the document box (textarea) can be properly displayed for modification. It seems that several steps are required.

Another method is not to handle this information during Publishing, so this information does not need to be edited, but \ n should be converted into <br/> before the page is displayed, however, I think this method is not optimized enough.ProgramIntegrity may be affected, because the conversion should be replaced by a regular expression, which slows down the program and when the content is published, many people read this information, each user's request to the server must be converted once (unless you generate a static page at the moment of release), and the number of releases and edits is far less than the number of external accesses, therefore, I suggest using the first method.

3. Example and source code

Below is an experimental tool I wrote in Javascript. You can try it.

Download source code:Quota box reserved format .rar

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = gb2312"   />
< Title > Reserved text box format ucoolweb.com </ Title >
</ Head >

< Body >
< Form ID = "Form1" Name = "Form1" Method = "Post" Action = "" >
< Textarea Name = "Textcontent" Cols = "100" Rows = "15" ID = "Textcontent" > </ Textarea >
< BR />
< Input Type = "Button" Name = "Submit" Value = "Conversion output" Onclick = "Outhtml ()"   />
< Input Name = "Checkbox" Type = "Checkbox" ID = "Checkbox" Value = "Checkbox" Checked = "Checked"   />
< Label For = "Checkbox" Style = "Color: # f00" > Enable conversion output </ Label >
</ Form >
< Div ID = "Out" Style = "Border: 1px solid # f90; padding: 10px; Background: # fff8dc; margin-top: 10px" > Please input text with HTML tags in the text box above to test! </ Div >
< Script Type = "Text/JavaScript" >
/* **************************************** *****************
* Author Tang Guohui, created: 2007-12-9 12:30:15
**************************************** ***************** */
Function Outhtml (){
VaR Getvalue = Document. getelementbyid ( " Textcontent " ). Value;
VaR Endvalue = (Getvalue. Replace ( / <(. +?)> / Gi, " & Lt; $1 & gt; " ). Replace ( /   / Gi, "& nbsp;"). Replace ( / \ N / Gi, "<br> ");
/*
(1) Escape "<" and ">"
(2) Change the halfwidth space to & nbsp;
(3) Retain line breaks
*/

If (Document. getelementbyid ( " Checkbox " ). Checked = True ){
Document. getelementbyid ( " Out " ). Innerhtml = Endvalue;
} Else {
Document. getelementbyid ( " Out " ). Innerhtml = Getvalue;
}

}//End outhtml Function
</Script>
</Body>
</Html>

<1> the conversion effect is not enabled:

<2> enable the conversion effect:

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.