UBB, clipboard, TextRange and others

ubb| clipboard

This is a post for beginners to learn the code, including the following:

How to use UBB code;
How to use JS to interact with the Clipboard;
How to use the TextRange object;
How to use a custom shortcut key operation;
How to automatically resize the page content with the window size;
The use of regular expressions, and so on.

Please read the code carefully, there are questions please ask, the current code development complete degree 80%,ie only

Run Code Box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Standards-compliant Mode" "http://www.w3.org/TR/xhtml1/ Dtd/xhtml1-transitional.dtd "><ptml><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>blue idea UBB Code edit</title><style>* {margin:0px; padding:0px;} HTML, body {background-color:buttonface; width:100%; height:100%; overflow:hidden; border-width:0px; font-size:13px; Font-family:verdana Arial XXFarEastFont. Color: #333333; Cursor:default;} input {border-width:1px;} #divMain {Overflow:hidden;} #divTools {width:100%; height:20px; line-height:20px; overflow:hidden; border-bottom:1px solid Buttonshadow; margin:0 px padding:0px; padding-left:10px; Background-color:buttonface; Color:black;} #divTools label {font-weight:bold;float:left;padding-left:15px;padding-right:15px;} #divTools a {display:block; float:left; height:20px; padding-left:15px; padding-right:15px; line-height:20px; Text-align:center; Overflow:hidDen Color:black; Text-decoration:none;} #divTools a:hover {Background-color:gold;color:black} #divTools a:active {Background-color:navy;color:white} #divContent, #txtContent {border:1px inset buttonface; width:94%; height:400px; overflow:auto; padding:5px; margin:2px 1 5px 0px 15px; Background-color:white; Color:black; Display:none;} #txtContent {font-size:14px; border-width:1px; display:block;}. Ubb_code {border:1px solid #555; padding:10px; margin:10px; width:500px; Background-color: #DDD; font-size:13px; Font-weight:normal; Color:black; }. ubb_html {padding:4px; width:350px; height:200px; font-size:13px; font-weight:normal; color:black;}. Ubb_html_button {width:100px; height:22px; line-height:18px; border-width:2px; margin:0px;} </style><script type= "Text/javascript" >var txtcontent, Divcontent, ViewButton01, ViewButton02, Dtf;var strhtmlstart= "<div><textarea class=\" ubb_html\ ">"; var strhtmlend= "<\/textarea><input type=\" button\ "value=\" Run code \ "onclick=\ "Ubb_runcode (this); \" Class=\ "ubb_html_button\" \/><\/div> "; var strcodestart=" <div class=\ "UBB_code\" > var strcodeend= "<\/div>"; function init () {Txtcontent=document.getelementbyid ("txtcontent"); divcontent =document.getelementbyid ("Divcontent"); Viewbutton01=document.getelementbyid ("ViewButton01"); Viewbutton02=document.getelementbyid ("ViewButton02"); Dtfframe=document.createelement ("iframe"); dtfframe.frameborder= "0px"; Dtfframe.style.width= "0px"; dtfframe.style.height= "0px"; Document.body.appendChild (Dtfframe); DTF=WINDOW.FRAMES[WINDOW.FRAMES.LENGTH-1]; Dtf.location.href= "About:blank"; Window.onresize=switchmodel; Txtcontent.onkeydown=chkkey; Switchmodel (0);} function Switchmodel (ID) {//Recalculate input area size txtcontent.style.width=document.body.clientwidth-50+ ' px '; txtcontent.style.height=document.body.clientheight-50+ "px"; divcontent.style.width=document.body.clientwidth-50+ "px"; divcontent.style.height=document.body.clientheight-50+ "px"; if (id==0) {//Go to Code view DivconteNt.style.display= "None"; txtcontent.style.display= "Block"; Viewbutton01.style.backgroundcolor= "Navy"; viewbutton01.style.color= "White"; Viewbutton02.style.backgroundcolor= ""; Viewbutton02.style.color= ""; Txtcontent.focus (); }else if (id==1) {//Go to Preview view divcontent.style.display= "block"; Txtcontent.style.display= "None"; Divcontent.innerhtml=ubb2html (Txtcontent.value); Viewbutton02.style.backgroundcolor= "Navy"; viewbutton02.style.color= "White"; Viewbutton01.style.backgroundcolor= ""; Viewbutton01.style.color= ""; Divcontent.focus (); }}function Html2ubb (strhtml) {var re=htmldecode (strhtml); Re=re.replace (/<?) Strong>/ig, "[http://www.alixixi.com/web/a/$1b]"); Re=re.replace (/<) (\/?) B>/ig, "[http://www.alixixi.com/web/a/$1b]"); Re=re.replace (/<) (\/?) Em>/ig, "[http://www.alixixi.com/web/a/$1i]"); Re=re.replace (/<) (\/?) I>/ig, "[http://www.alixixi.com/web/a/$1i]"); Re=re.replace (/< * (\/) *div[\w\w]*?>/ig, "\ r \ n"); Re=re.replace (/< *img +[\w\w]*?src=["]? ( [^">\r\n]+) [\w\w]*?>/ig, ""); Re=re.replace (/< *a +[\w\w]*?href=["]? ( [^ ">\r\n]+") [\w\w]*?> ([\w\w]*?) < *\/*a *>/ig, "$"); Re=re.replace (/<script[\w\w]+?<\/script>/ig, ""); Re=re.replace (/<[\w\w]*?>/ig, ""); Re=re.replace (/(\ r \ n) {2,}/g, "\ r \ n"); return (re); function ubb2html (Strubb) {var Re=strubb;//Convert HTML entity re=htmlencode (re);//mask UBB in HTML and Code Re=re.replace (/(\[HT Ml\]) ([\w\w]*?) (\[\/html\])/ig,ubb2html_escapeubb); Re=re.replace (/(\[code\]) ([\w\w]*?) (\[\/code\])/ig,ubb2html_escapeubb); Convert UBB code to HTML code re=re.replace (/\[b\]/ig, "<b>"). Replace (/\[\/b\]/ig, "<\/b>"); Re=re.replace (/\[i\]/ig, "<i>"). Replace (/\[\/i\]/ig, "<\/i>"); Re=re.replace (/\[code\]/ig,strcodestart). replace (/\[\/code\]/ig,strcodeend); Re=re.replace (/\[html\]/ig,strhtmlstart). replace (/\[\/html\]/ig,strhtmlend); Re=re.replace (/\<font size= "(\d) \" >/ig,ubb2html_fontsize). Replace (/\[\/size\]/ig, "<\/span>"); Re=re.replace (/\[img\]/ig, "http://www.alixixi.com/web/a/$1<\/a>"); Re=re.replace (/\[url=) ([^\]]+?) \]/ig,ubb2html_url). Replace (/\[\/url\]/ig, "<\/a>"); Restores the UBB re=re.replace (/\\\[/g, "[") in HTML and code. Replace (/\\\]/g, "]"); return (re); function Ubb2html_escapeubb (STRALL,STRS1,STRS2,STRS3) {switch (Strs1.tolowercase ()) {case ' [HTML] ': Return (strs1+ HtmlDecode (Strs2.replace (/\[/g, "\\["). Replace (/\]/g, "\")) +STRS3); Break Case "[Code]": Return (Strs1+strs2.replace (/\[/g, "\\["). Replace (/\]/g, "\ \]") +STRS3); Break }}function HtmlEncode (STRs) {return (Strs.replace (/&/g, "&"). Replace (/</g, "<"). Replace (/>/g, "> "). Replace (//g,"   "). Replace (/\r\n/g," <br\/> ")); function HtmlDecode (STRs) {return (Strs.replace (/<br\/?>/ig, "\ r \ n"). Replace (/ /ig, ""). Replace (/>/ig , ">"). Replace (/</ig, "<"). Replace (/&/ig, "&")); function UBb_runcode (obj) {theobj=obj; while (theobj=theobj.previoussibling) if (String (theobj.tagname). toLowerCase () = " TextArea ") {Newwin=open (); NewWin.document.open (); NewWin.document.clear (); NewWin.document.write (Theobj.value); NewWin.document.close (); return (true); }}function ubb2html_fontsize (str,i) {return ("<span style=\" font-size: "+ (7+i*4) +" px;\ ">");} function Ubb2html_url (str,strurl) {return ("<a href=\" "+strurl+" \ "\/>");} function Chkkey () {var ek=keychar (). toLowerCase (); switch (EK) {case ' tab ': Setubb (EK); return (false); Break Case ' B ': case ' + ': Case '-': if (event.ctrlkey) {Setubb (EK); return (false); } break; Case ' C ': Case ' h ': Case ' I ': if (event.ctrlkey&&event.shiftkey) {Setubb (EK); return (false); } break; Case "V": if (event.ctrlkey&&event.shiftkey) {chkpaste (), return (false); }else if (event.ctrlkey&&event.altkey) {Chkpasteh (); return (false); } break; }}function Chkpaste () {txtcontent.focus (); tr=document.selectioN.createrange (); Dtf.document.body.innerhtml= ""; Dtf.document.body.contenteditable=true; Dtf.document.body.focus (); Dtf.document.execCommand ("paste"); Tr.text=html2ubb (Dtf.document.body.innerHTML); Tr.select ();} function Chkpasteh () {txtcontent.focus (); Tr=document.selection.createrange (); dtf.document.body.innerhtml= ""; Dtf.document.body.contenteditable=true; Dtf.document.body.focus (); Dtf.document.execCommand ("paste"); tr.text= (Dtf.document.body.innerHTML); Tr.select ();} function Setubb (type) {var tR, strt, IntSize; var typecodes=new Array (); Switchmodel (0); Txtcontent.focus (); tr=document. Selection.createrange (); Strt=tr.text; Switch (type) {Case "tab": tr.text= "T"; Tr.collapse (); Tr.select (); Break Case "B": if (Strt.match (/^\[b\][\w\w]*?\[\/b\]$/i)) {tr.text=strt.substring (3,strt.length-4); Tr.movestart ("character",-len (STRT) +7); Tr.select (); }else{tr.text= "<b>" +strt+ "</b>"; if (strt== "") {Tr.movestart ("character", -4); Tr.collapse (); }else{ Tr.movestart ("character",-len (STRT)-7); } tr.select (); } break; Case "I": if (Strt.match (/^\[i\][\w\w]*?\[\/i\]$/i)) {tr.text=strt.substring (3,strt.length-4); Tr.movestart ("character",-len (STRT) +7); Tr.select (); }else{tr.text= "<i>" +strt+ "</i>"; if (strt== "") {Tr.movestart ("character", -4); Tr.collapse (); }else{Tr.movestart ("character",-len (STRT)-7); } tr.select (); } break; Case "C": if (Strt.match (/^\[code\][\w\w]*?\[\/code\]$/i)) {tr.text=strt.substring (6,strt.length-7); Tr.movestart ("character",-len (STRT) +13); Tr.select (); }else{tr.text= "[Code]" +strt+ "[\/code]"; if (strt== "") {Tr.movestart ("character", -7); Tr.collapse (); }else{Tr.movestart ("character",-len (STRT)-13); } tr.select (); } break; Case "H": if (Strt.match (/^\[html\][\w\w]*?\[\/html\]$/i)) {tr.text=strt.substring (6,strt.length-7); Tr.movestart ("character",-len (STRT) +13); Tr.select (); }else{tr.text= "[HTML]" +strT+ "[\/html]"; if (strt== "") {Tr.movestart ("character", -7); Tr.collapse (); }else{Tr.movestart ("character",-len (STRT)-13); } tr.select (); } break; Case "+": if (Strt.match (/^\[size=\d\][\w\w]*?\[\/size\]$/i)) {Intsize=parseint (Strt.charat (6)) +1; if (intsize<10) {tr.text=strt.substring (0,6) +intsize+strt.substring (7); Tr.movestart ("character",-len (STRT)); }else{tr.text=strt.substring (8,strt.length-7); Tr.movestart ("character",-len (STRT) +15); } tr.select (); }else{tr.text= "[size=1]" +strt+ "</font>"; if (strt== "") {Tr.movestart ("character", -7); Tr.collapse (); }else{Tr.movestart ("character",-len (STRT)-15); } tr.select (); } break; Case "-": if (Strt.match (/^\<font size= "\d\" >[\w\w]*?\[\/size\]$/i)) {Intsize=parseint (Strt.charat (6))-1; if (intsize>0) {tr.text=strt.substring (0,6) +intsize+strt.substring (7); Tr.movestart ("character",-len (STRT)); }else{tr.text=strt.substring (8,sTRT.LENGTH-7); Tr.movestart ("character",-len (STRT) +15); } tr.select (); }else{tr.text= "[size=9]" +strt+ "</font>"; if (strt== "") {Tr.movestart ("character", -7); Tr.collapse (); }else{Tr.movestart ("character",-len (STRT)-15); } tr.select (); } break; }}function len (str) {return (Str.replace (/\r\n/g, "\ r"). length); function Keychar () {if (Event.shiftkey) {switch (event.keyCode.toString ()) {case "n": Return ("0"); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("~"); Case "a": Return ("!"); Case "a": Return ("@"); Case "Wuyi": Return ("#"); Case "a": Return ("$"); Case "a": return ("%"); CaSe "si": Return ("^"); Case "a": Return ("&"); Case "a": Return ("*"); Case "a": Return ("("); Case "a": Return (")"); Case "189": Return ("_"); Case "187": Return ("+"); Case "219": Return ("{"); Case "221": Return ("}"); Case "the": Return ("|"); Case "a": Return ("Caplock"); Case "186": Return (":"); Case "222": Return ("\"); Case "188": Return ("<"); Case "190": Return (">"); Case "191": Return ("?"); Case "8": Return ("backspace"); Case "9": Return ("tab"); Case "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); Case "the": Return ("O"); Case "No": Return ("P"); Case "the": Return ("A"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "a": Return ("shift"); Case "the": RETUrn ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("N"); Case "a": Return ("M"); Case "a": Return ("Ctrl"); Case "a": Return ("Win"); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); Case "the": Return ("right"); Case "a": Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": returN ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }else{switch (event.keyCode.toString ()) {case "," Return ("0"); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("'"); Case "a": Return ("1"); Case "a": Return ("2"); Case "Wuyi": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "WU": Return ("6"); Case "a": Return ("7"); Case "a": Return ("8"); Case "a": Return ("9"); Case "a": Return ("0"); Case "189": Return ("-"); Case "187": return ("="); Case "8": Return ("backspace"); Case "9": Return ("tab");Case "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); Case "the": Return ("O"); Case "No": Return ("P"); Case "219": Return ("["); Case "221": Return ("]"); Case "the": Return ("\"); Case "a": Return ("Caplock"); Case "the": Return ("a"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "186": Return (";"); Case "222": Return ("'"); Case "a": Return ("shift"); Case "the": Return ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("n"); Case "a": Return ("M"); Case "188": Return (","); Case "190": Return ("."); Case "191": Return ("/"); Case "a": Return ("Ctrl"); Case "a": Return ("Win"); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); Case "the": Return ("right"); Case "a": Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": Return ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }}}</script></pead><body onload= "init ();" ><div id= "Divmain" ><divId= "Divtools" ><label> view mode: </label><a href= "javascript:void (Switchmodel (0));" Id= "ViewButton01" > Code View </a><a href= "Javascript:void (Switchmodel (1));" Id= "viewButton02" > Preview view </a><label> | Style tools: </label><a href= "javascript:void (Setubb (' B ')") "title=" Ctrl + B "> Bold </a><a href=" javascript : Void (Setubb (' I ')) "title=" CTRL + SHIFT + I "> Italic </a><a href=" javascript:void (Setubb (' C ')) "title=" Ctrl + SHIFT + C "> Code </a><a href=" Javascript:void (Setubb (' h ')) "title=" CTRL + SHIFT + H ">html run </a><a Href= "Javascript:void (Setubb (' + ')" title= "Ctrl + +" > font + </a><a href= "javascript:void (Setubb (')") " Title= "Ctrl +-" > font-</a><a href= "Javascript:void (Chkpaste ())" title= "CTRL + SHIFT + V" > Paste ubb</a>& Lt;a href= "Javascript:void (Chkpasteh ())" title= "Ctrl + ALT + V" > Paste html</a></div><div id= "divContent "Contenteditable=" false "></div><textarea id=" Txtcontent "&GT;</textarea></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]