Preserves line wrapping and space styles for multiline text boxes and escapes the angle brackets of HTML tags

Source: Internet
Author: User

This article uses JavaScript to demonstrate, this does not affect your actual application in the project, because I provide the idea, you can easily put it in your own language to implement, which is usually the background language, and the following provides the regular expression you can almost completely copy, because the regular expression is generic.

Webflash
Source: http://webflash.cnblogs.com
This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

I. SOURCES of demand

If you have a Web site project, you need to provide a message portal, you use only the ordinary multi-line text box (textarea) for the collection of message content, do not like users to enter some HTML tags, or even script. Like below I Douban in the film review release, if you do not join the process, directly into the database, and finally in the page output display you also directly read the contents of the database, you will see all the original intent to fragment the text is linked together, if the text box content also contains HTML tags, also shows the effect. Believe that this is not your effect, so you have to find a way to change the line in the textarea "\ n" to "<br/>" for the final display of the page, the corresponding surface-to-air grid (full-width space can not be processed, I found that 163 of blogs do this) and the angle brackets of the HTML tags are also converted, which makes it easy to think of a method of finding replacements.

Second, the optimization program

If the information is posted to the <br/> and then into the database, so that when the page is displayed, read the library and display it directly, but if you want to edit the previous information, you have to read from the database containing the content of the <br/> <br/ > turns to \ n in the document box (TEXTAREA) to display as normal for modification. Seems to be dealing with a few steps.

Another way is to release the time is not processed, then this message is not processed when it is edited, but before the page display to the <BR/>, but I think this method is not optimized, the overall performance of the program has a certain impact, because the conversion to be replaced with regular expressions, is to make the program slow, and when the content is published, a lot of people read this message, each user requests for the server to be converted once (unless you generate a static page at the time of publication), and the number of publishing and editing is much less than the number of visits outside, so I recommend the first method.

A city example and source code

Here is an experimental tool that I wrote in JavaScript and you can try it.

Source Download: text box retention format. rar

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> text box retention format ucoolweb.com</title>

<body>
<form id= "Form1" Name= "Form1" method= "Post" action= "" >
<textarea name= "textcontent" cols= "rows=", "id=" ></textarea>
<br/>
<input type= "button" Name= "Submit" value= "Convert 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 enter text test with HTML tag in the text box above! </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) Escaping "<", ">"
(2) Change half-width space for &nbsp;
(3) Keep line breaks
*/

if (document.getElementById ("checkbox"). Checked==true) {
document.getElementById ("Out"). Innerhtml=endvalue;
}else{
document.getElementById ("Out"). Innerhtml=getvalue;
}

}//end outhtml function
</script>
</body>

<1> conversion effect is not enabled:

<2> Enable conversion effects:

Preserves line wrapping and space styles for multiline text boxes and escapes the angle brackets of HTML tags

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.