JavaScript为文本框内选中文字添加标签

使用以下原创代码请遵循协议.

 

Default.aspx

  1  <% @ Page Language = " C# "   %>
  2 
  3  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  4 
  5  < html  xmlns ="http://www.w3.org/1999/xhtml" >
  6  < head  id ="Head1"  runat ="server" >
  7       < title ></ title >
  8       < script  type ="text/javascript" >
  9           var  start  =   0 ;
 10           var  end  =   0 ;
 11          
 12           function  add() {
 13               var  textBox  =  document.getElementById( " inputtext " );
 14               var  pre  =  textBox.value.substr( 0 , start);
 15               var  text  =  textBox.value.substr(start, end  -  start);
 16               var  post  =  textBox.value.substr(end);
 17 
 18               if  (text  !=   "" ) {
 19                  textBox.value  =  pre  +   " <h1> "   +  text  +   " </h1> "   +  post;
 20              }
 21          }
 22 
 23           function  remove() {
 24               var  z  =   0 ;
 25               var  textBox  =  document.getElementById( " inputtext " );
 26              
 27               var  pre  =  textBox.value.substr( 0 , start);
 28               var  _sh1  =  pre.lastIndexOf( " <h1> " );
 29              
 30               if  (_sh1  !=   - 1 ) {
 31                   if  (pre.lastIndexOf( " </h1> " )  <  _sh1) {
 32                      z ++ ;
 33                  }
 34              }
 35 
 36               var  text  =  textBox.value.substr(start, end  -  start);
 37              
 38               var  post  =  textBox.value.substr(end);
 39               var  _eh1  =  post.indexOf( " </h1> " );
 40 
 41               if  (_eh1  !=   - 1 ) {
 42                   if  (post.indexOf( " <h1> " )  >  _eh1  ||  post.indexOf( " <h1> " )  ==   - 1 ) {
 43                      z ++ ;
 44                  }
 45              }
 46 
 47               if  (z  ==   2 ) {
 48                  pre  =  pre.substr( 0 , _sh1)  +  pre.substr(_sh1  +   4 );
 49                  post  =  post.substr( 0 , _eh1)  +  post.substr(_eh1  +   5 );
 50              }
 51              
 52              textBox.value  =  pre  +  text  +  post;
 53          }
 54          
 55           function  savePos(textBox) {
 56               // FF
 57               if  ( typeof  (textBox.selectionStart)  ==   " number " ) {
 58                  start  =  textBox.selectionStart;
 59                  end  =  textBox.selectionEnd;
 60              }
 61               // IE
 62               else   if  (document.selection) {
 63                   var  range  =  document.selection.createRange();
 64                   if  (range.parentElement().id  ==  textBox.id) {
 65                       var  range_all  =  document.body.createTextRange();
 66                      range_all.moveToElementText(textBox);
 67 
 68                       for  (start  =   0 ; range_all.compareEndPoints( " StartToStart " , range)  <   0 ; start ++ ) {
 69                          range_all.moveStart( ' character ' ,  1 );
 70                      }
 71                                          
 72                       for  ( var  i  =   0 ; i  <=  start; i ++ ) {
 73                           if  (textBox.value.charAt(i)  ==   ' \n ' )
 74                              start ++ ;
 75                      }
 76                      
 77                       var  range_all  =  document.body.createTextRange();
 78                      range_all.moveToElementText(textBox);
 79 
 80                       for  (end  =   0 ; range_all.compareEndPoints( ' StartToEnd ' , range)  <   0 ; end ++ ) {
 81                          range_all.moveStart( ' character ' ,  1 );
 82                      } 
 83                      
 84                       for  ( var  i  =   0 ; i  <=  end; i ++ ) {
 85                           if  (textBox.value.charAt(i)  ==   ' \n ' )
 86                              end ++ ;
 87                      }
 88                  }
 89              }
 90              
 91              document.getElementById( " start " ).value  =  start;
 92              document.getElementById( " end " ).value  =  end;
 93          }
 94       </ script >
 95 
 96  </ head >
 97  < body >
 98       < form  id ="form1"  runat ="server" >
 99       < table  border ="1"  cellspacing ="0"  cellpadding ="0" >
100           < tr >
101               < td >
102                  start: 
103                   < input  type ="text"  id ="start"  size ="3"   />
104               </ td >
105               < td >
106                  end: 
107                   < input  type ="text"  id ="end"  size ="3"   />
108               </ td >
109           </ tr >
110           < tr >
111               < td  colspan ="2" >
112               < textarea  id ="inputtext"  
113                        onkeydown ="savePos(this)"  
114                        onkeyup ="savePos(this)"  
115                        onmousedown ="savePos(this)"
116                        onmouseup ="savePos(this)"  
117                        onfocus ="savePos(this)"  
118                        rows ="14"  cols ="50" > 1234567890 </ textarea >
119               </ td >
120           </ tr >
121           < tr >
122               < td >
123                   < input  type ="button"  onclick ="add()"  value ="Add h1"   />
124               </ td >
125               < td >
126                   < input  type ="button"  onclick ="remove()"  value ="Remove h1"   />
127               </ td >
128           </ tr >
129       </ table >
130       </ form >
131  </ body >
132  </ html >