Some research materials on intuitive line wrapping of textarea_javascript skills

Two days ago, I studied the line wrapping rules of textarea's intuitive rows. It's quite complicated:

How to choose the intuitive rows depends not only on the cols size, but also on the web page encoding method. The textarea of ​​
cols="30" can actually accommodate 29 half-width characters per line. The number of full-width characters is not necessarily determined, and it is related to the encoding method of the web page.
In the actual measurement of IE6.0, the visual line break occurs at the red text (the red text is folded to the next line).

dddddddddddddddddddddddddddddddd //The continuous half-width content after the full-width is treated as a complete word. If the remaining position cannot accommodate the length of the word, it must be wrapped. This is a special rule A

The general rule when web pages are encoded in Unicode (the pop-up page of "Run Code" is encoded in this way, and the pages generated by JS are encoded in this way) is

("full" means that no matter what is followed by the full-width , half-width characters, all have to be wrapped)

123456789012345678901234567890 //29 half-width is full
12345678911234567890 //17 full-width is full
One two three four five six seven eight ninety one two three four five six seven eight ninety
One two three four five six seven eight ninety one two three four five six seven eight ninety
0 One Two Three Four Five Six Seven Eight Nine One Two Three Four Five Six One Seven Eight Ninety //16 full-width, 1 half-width occupied
0 One Two Three Four Five Six Seven Eight Nine Eleven Two Three Four Five six seven eight ninety
0 one two three four five six seven eight ninety one two three four five one six seven eight ninety //15 full-width, full-width is not allowed after 2 half-widths
01 one two three four Five six seven eight ninety one two three four five six seven eight ninety
01 one two three four five six seven eight ninety one two three four five two six seven eight ninety // 15 full-width, 2 half-width can be used Allow another half-width (if more than one half-width, special rule A is followed)
012 one, two, three, four, five, six, seven, eight, ninety, one, two, three, four, five, six, seven, eight, ninety // 15 full-widths, 3 half-widths are used
012 one two three four five six seven eight ninety one two three four five three six seven eight ninety
0123 one two three four five six seven eight ninety eleven two three four five six seven eight ninety //14 Full-width, after 4 half-width, full-width is not allowed
0123 One, two, three, four, five-six, seven-eight, ninety-one, two, three, four, five-six, seven-eight-ninety // 14 full-width, after 4 half-width, 1 half-width can be accommodated (more than 1 According to special rules for half-width A)
01234 one, two, three, four, five, six, seven, eight, ninety, one, two, three, four, five, six, seven, eight, ninety // 14 full-width, 5 half-width occupied
01234, one-two-three-four-five-six Seven eight ninety one two three four five five six seven eight ninety
012345 one two three four five six seven eight ninety one two three four five six seven eight ninety //13 full-width, full-width cannot be allowed after 6 half-width
012345 123456789112364567890 //13 full-width, after 6 half-width, 1 half-width can be accommodated (if more than 1 half-width, special rule A will apply)
0123456 One Two Three Four Five Six Seven Eight Nine One Two Three Four Five Six Seven Eight Ninety //13 full-width, 7 half-width occupied
0123456 One Two Three Four Five Six Seven Eight Nine Eleven Two Three Seven Four Five six seven eight ninety
01234567 one two three four five six seven eight ninety one two three four five six seven eight ninety // 12 full-width, 8 half-width occupied
01234567 one two three four five sixty-seven 8912834567890
0123456781234567891234567890//11 full-width, 9 half-width cannot be followed by full-width
012345678 one two three four five six seven eight nine one nine two three four five six seven eight nine ten //11 full-width, after 9 half-widths, 1 half-width can be accommodated (if more than 1 half-width, special rule A will apply)
0123456789 one two three four five six seven eight ninety one two three four five six seven eight ninety //11 full-width, 10 half-width occupied

......

0 one two three four 56789123451267890 //15 full-width, after 1 half-width, 2 half-width consecutive characters can be accommodated (special rule A applies when more than 2 half-widths are used), this item can be changed from 15 full-width, 3 half-widths are filled up to get

...

0 one, two, three, four, five, six, seven, eight, ninety, one, two, three, four, 1234, five, six, seven, eight, ninety // 14 full-width, 1 half-width It can accommodate 4 consecutive half-width characters (if there are more than 4 half-widths, special rule A is followed). This can be obtained from 14 full-widths and 5 half-widths.

...

01 one two three four 567891234234567890 //14 full-width, after 2 half-widths, 3 half-width consecutive characters can be accommodated (special rule A applies when more than 3 half-widths), this item can be composed of 14 full-width, 5 half-width is filled up to get

...
The line break position is not only related to the entire line of text before the line break position, but also to the red text (often the full-width text is folded because it cannot be squeezed down at the end of the upper line) of the next line).

To summarize:


CODE:[Copy to clipboard]x full width, y half width occupied = x full width, y-1 half width cannot be accommodated after full width = x full width, After y-n half-width characters, n half-width consecutive characters can be accommodated (if there are more than n half-width characters, special rules A apply).
So just do experiments to find out all the "full" situations.

Now list cols=30 and the "full" situation when the webpage is encoded in Unicode:

17 full-width
16 full-width, 1 half-width
15 full-width, 3 half-width
14 full-width, 5 half-width
13 full-width, 7 half-width
12 full-width, 8 half-width
11 full-width, 10 half-width
10 full-width, 12 half-width
9 full-width, 13 half-width
8 full-width, 15 half-width
7 full-width, 17 half-width
6 full-width, 19 half-width
5 full-width, 21 half-width
4 full-width, 22 half-width
3 full-width, 24 half-width
2 Full-width, 26 half-width
1 full-width, 28 half-width
29 half-width

Using the situation where a line break is on the verge of occurring according to the special rule A, it is easy to detect all "full" situations:
For example , one two three four five six seven eight nine ten 012345678912 one two three four five six seven eight nine ten //10 full-width, 12 half-width occupied
one two three four five six seven eight nine ten 0123456789123 one two three four five Sixty-seven, eighty-ninety // The red words are line-wrapped according to the special rule A, the blue words are full-width 9, and 13 half-width are used to wrap the line

cols=30. When the web page is encoded according to GB2312, the "full-width" rule is different. :

14 full-width, 1 half-width
13 full-width, 3 half-width
12 full-width, 5 half-width
11 full-width, 7 half-width
10 full-width, 9 half-width
9 full-width, 11 half-width
8 full-width, 13 half-width
7 full-width, 15 half-width
6 full-width, 17 half-width
5 full-width, 19 half-width
4 full-width, 21 half-width
3 full-width, 23 half-width
2 full-width, 25 half-width
1 full-width, 27 half-width
29 half-width

In this case, the "full" rule can only be measured through experiments based on the encoding method and cols of the web page. .

Count the number of full-width and half-width characters from the beginning of the textarea content, determine the position of the first visual line break according to the "full" rule and special rule A, and then start from the second line (including physical lines and visual lines) Line), count the number of full-width and half-width characters, and determine the position of the second intuitive line break according to the "full" rule and special rule A...and continue in this way until the end of the textarea content. In this way, all line break positions can be obtained.

Of course, it is not necessary or possible to do this experiment in actual applications. For example, select rows X to Y of a textarea. I haven’t learned the official method yet. Here’s what I did:

<textarea rows="5" cols="30" id="abc"> My grandfather heard that I was going to take my girlfriend fishing and wanted to meet her. I took my girlfriend there first, and while I was waiting for my grandfather, I had already caught an 18-kilogram bass. When my grandfather arrived, I introduced my girlfriend to him and held up the fish to show him. Really good! He said, how did you catch it? Use earthworms. I answered. That's strange, he said deliberately seriously, My generation could use at least one meal and a movie! <input name="start" value="3"> Select rows <input name="end" value="5"> to rows <button onclick="sele(start.value,end.value)"> </button>select
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

What I wrote in early 2004 should be the most comprehensive research at present, right? ?

<style> * { font-size: 12px; } </style> <table><tr> <td> <textarea id="test" style="width:400px; height:200px" onclick="get_txt_pos()" onkeyup="get_txt_pos()"> 1 - 1234567890 2 - 12345678901234567890 3 - 123456789012345678901234567890 4 - 1234567890123456789012345678901234567890 5 - 12345678901234567890123456789012345678901234567890 6 - 123456789012345678901234567890123456789012345678901234567890 7 - 1234567890123456789012345678901234567890123456789012345678901234567890 8 - 12345678901234567890123456789012345678901234567890123456789012345678901234567890 9 - 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 0 - 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890   Current Position : Physical Row: Physical Column: Visible Row: Visible Column: Error Message:

1-1234567890 2 - 12345678901234567890 3 - 123456789012345678901234567890 4 - 1234567890123456789012345678901234567890 5 - 12345678901234567890123456789012345678901234567890 6 - 123456789012345678901234567890123456789012345678901234567890 7 - 1234567890123456789012345678901234567890123456789012345678901234567890 8 - 12345678901234567890123456789012345678901234567890123456789012345678901234567890 9 - 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 0 - 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 <script language="javascript"> // Coded by windy_sk <windy_sk@126.com> 20040210 function reportError(msg,url,line) { var str = "You have found an error as below: \n\n"; str += "Err: " + msg + " on line: " + line; alert(str); return true; } window.onerror = reportError; function show_all(obj, txt_obj) { var x, y; txt_obj.value = ""; for(x in obj) { if(typeof(obj[x])=="object") { txt_obj.value += x + " : \n"; for(y in obj[x]) txt_obj.value += " " + y + " - " + obj[x][y] + "\n"; } else { txt_obj.value += x + " - " + obj[x] + "\n"; } } return; } var cur_pos = 0; var p_row = 0; var p_col = 0; var v_row = 0; var v_col = 0; var s_len = 0; var r_count = 0; function get_txt_pos() { try{ var obj = document.getElementById("test"); var rng = obj.createTextRange(); var rng_sel = obj.document.selection.createRange(); var if_end = false; var arr_sel = new Array(); show_all(rng, ctr); show_all(rng_sel, cr) show_all(rng.getClientRects(), ctr_crt); show_all(rng_sel.getClientRects(), cr_crt) show_all(rng.getBoundingClientRect(), ctr_bcrt); show_all(rng_sel.getBoundingClientRect(), cr_bcrt) s_len = rng_sel.text.replace(/\r/, "").length; rng.moveToPoint(rng_sel.offsetLeft, rng_sel.offsetTop); rng.moveStart('character', -obj.value.length); try { r_count = rng.text.match(/\r/g).length; } catch(e) { r_count = 0; } cur_pos = rng.text.length; if_end = (rng.getBoundingClientRect().left == rng_sel.getBoundingClientRect().left); arr_sel = rng.text.split("\r\n"); p_row = arr_sel.length; p_col = if_end?0:arr_sel[arr_sel.length-1].length; var rct = rng.getClientRects(); v_row = rct.length; rng.moveToPoint(rct[v_row-1].left, rct[v_row-1].top); rng.moveStart('character', -cur_pos); v_col = if_end?0:(cur_pos - rng.text.length); if(v_col - p_col == 2) v_col = p_col; err.value = ""; }catch(e){ show_all(e, err) cur_pos = 0; p_row = 0; p_col = 0; v_row = 0; v_col = 0; s_len = 0; r_count = 0; } show_txt_pos(); return; } function restore_txt() { var obj = document.getElementById("test"); obj.focus(); var rng = obj.createTextRange(); rng.moveStart('character', cur_pos - r_count); rng.collapse(true); rng.moveEnd('character', s_len); rng.select(); show_txt_pos(); return; } function show_txt_pos() { cur_pos_show.innerText = cur_pos - r_count; p_row_show.innerText = p_row; p_col_show.innerText = p_col; v_row_show.innerText = v_row; v_col_show.innerText = v_col; return; } </script>

Current Position: Physical Row: Physical Column: Visible Row: Visible Column: Error Message: <script language="JScript"> /* Create by Bound0 on Blueidea mailto:bound0@tom.com */ function sele(s,e){ var src = document.getElementById("abc") var oTR = src.createTextRange() var text=src.innerText var textLength = text.length conts=[0] /* 我一开始不知道getClientRects()方法，就用这段代码取textarea内容开始处在网页中的大致坐标，可见条条大路通罗马 Obj=src for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent); startx=sumLeft+6 //textarea内容开始处在网页中的大致坐标 starty=sumTop+9 */ src.scrollTop=0 //确保开始数行数时滚动条位于顶部 startx=src.createTextRange().getClientRects()[0].left starty=src.createTextRange().getClientRects()[0].top stepy=3 //光标向下移动的步长，不能大于textarea中的字高 currentScr=0 //当前滚动条位置 stepScr=30 //滚动条向下滚动的步长，不能大于textarea的高度 while(1){src.scrollTop=currentScr currenty=starty while(1) //光标从textarea内容的开头开始向下移动，遍历各行，在conts[]中记下各换行位置 {oTR.moveToPoint(startx, currenty) oTR.moveEnd("character", textLength) cont = textLength - oTR.text.length if(cont>=textLength)break if(cont>conts[conts.length-1])conts[conts.length]=cont currenty+=stepy } if(currentScr>=src.scrollHeight)break currentScr+=stepScr } if(e=="")e=s s=parseInt(s) e=parseInt(e) if(isFinite(s)&&isFinite(e)&&s>0&&e>0){if(s>conts.length||e>conts.length){alert("总共只有"+conts.length+"行。") //检查参数有效性 return} if(e<s){e=s;end.value=e} //如果结束行在开始行之前，强行调整参数 src.scrollTop=0 oTR.moveToPoint(startx,starty) //光标回到textarea内容的开头 st=conts[s-1] texpreStart=text.substr(0,st).replace(/\r/g,"") //自textarea内容的开头至选择起点前的字串，由于moveStart方法将 \n视为一个字符，需要修正计数 st=texpreStart.length oTR.moveStart("character",st) en=textLength if(e<conts.length)en=conts[e] texpreEnd=text.substr(0,en).replace(/\r/g,"") //自textarea内容的开头至选择结束点前的字串，由于moveEnd方法将 \n视为一个字符，需要修正计数 en=texpreEnd.length oTR.moveEnd("character", en-st) oTR.select() } } </script>

CreateRange	CreateTextRange
CreateRange.getClientRects()	CreateTextRange.getClientRects()
CreateRange.getBoundingClientRect()	CreateTextRange.getBoundingClientRect()

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

根据被某网站匿名转载的页面（ http://dl.pconline.com.cn/html_2/4/545/id=38457&pn=0.html ）上的网友留言，上面的《JS实现文本域的任意行选定》示例代码有一处bug：即在滚动条不在顶端的情况下运行示例代码会出错。现已修正：只增加了一行代码


CODE:
src.scrollTop=0 //确保开始数行数时滚动条位于顶部

<textarea rows="5" cols="30" id="abc"> Bound0 子确工作室 生物信息学相关业务简介 [多步生物信息查询的一步化] 将繁琐的多步生物信息查询合并为一步，减少在各个网页间的手工跳转。 只要能够理清多步生物信息查询的流程就可能做到一步化。 [批量数据转录、整合] 将大量零散的文档收录到数据库中或整理、转化为符合要求的格式。 例如：将数百个结构复杂的word文档内容收录到数据库中。 [定制Bound0 Eureka预选器数据库] 利用Bound0 Eureka预选器数据库可以初步判断样品的成分，缩小进一步实验的处理范围，对接下来的实验环节做出调整，或预选出最佳的实验方案，从而缩短研究、开发的周期，节省人力物力。还可以初步验证某些假设推断，并有助于提出新的假设推断，构建新的假说。同时让交流和教学过程变得更简单、方便。 有关Bound0 Eureka预选器数据库核心技术的专利申请已被受理，专利申请号：200610077985.3。 定制Bound0 Eureka预选器数据库（Bound0 Eureka Preselector）的业务实质： 1、定制公共数据库内容的本地化整合。 2、定制数据库查询方式和查询项目。 3、定制分析、统计功能。 4、定制数据共享功能。 5、定制教学展示功能。 6、定制其他辅助功能。 例如：Bound0酵母蛋白Eureka预选器数据库的数据内容整合了SGD数据库（Saccharomyces Genome Database，酵母基因组库http://www.yeastgenome.org/）中的部分数据。共包含6713个蛋白的信息。 Bound0酵母蛋白Eureka预选器数据库具有以下基本功能： （1）Eureka Preselector(主功能): 根据条件给出符合条件的蛋白质列表。根据蛋白质的特征与目标特征的接近程度对列表内的蛋白质进行排名。以网页形式输出、保存 Eureka 结果。对保存的结果进行对比分析。 （2）以树状结构显示（treeview）蛋白质的各种生物学信息。 （3）以搜索引擎形式，对描述蛋白质充当的细胞组分、参与的生物过程、分子功能等描述性特征的标准化术语（GO Term）提供注释和指导。 （4）以搜索引擎形式，对蛋白质的各种ID、名称进行通译。 （5）在安装了Bound0酵母蛋白Eureka预选器数据库的计算机上，实现自定义的eureka:// 协议。可以在用户自己的网页中以超级链接（文字链接、图片热点链接等）的方式动态地调用数据库中的内容进行演示。 （6）自动生成上述演示所需要的链接代码。 （7）独立发行（便于数据共享）的数据分析配件，可对以网页形式保存的 Eureka 结果进行处理。 更多详情请置询bound0@tom.com <script language="JScript"> /* Create by Bound0 on Blueidea mailto:bound0@tom.com */ function sele(s,e){ var src = document.getElementById("abc") var oTR = src.createTextRange() var text=src.innerText var textLength = text.length conts=[0] /* 我一开始不知道getClientRects()方法，就用这段代码取textarea内容开始处在网页中的大致坐标，可见条条大路通罗马 Obj=src for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent); startx=sumLeft+6 //textarea内容开始处在网页中的大致坐标 starty=sumTop+9 */ src.scrollTop=0 //确保开始数行数时滚动条位于顶部 startx=src.createTextRange().getClientRects()[0].left starty=src.createTextRange().getClientRects()[0].top stepy=3 //光标向下移动的步长，不能大于textarea中的字高 currentScr=0 //当前滚动条位置 stepScr=30 //滚动条向下滚动的步长，不能大于textarea的高度 while(1){src.scrollTop=currentScr currenty=starty while(1) //光标从textarea内容的开头开始向下移动，遍历各行，在conts[]中记下各换行位置 {oTR.moveToPoint(startx, currenty) oTR.moveEnd("character", textLength) cont = textLength - oTR.text.length if(cont>=textLength)break if(cont>conts[conts.length-1])conts[conts.length]=cont currenty+=stepy } if(currentScr>=src.scrollHeight)break currentScr+=stepScr } if(e=="")e=s s=parseInt(s) e=parseInt(e) if(isFinite(s)&&isFinite(e)&&s>0&&e>0){if(s>conts.length||e>conts.length){alert("总共只有"+conts.length+"行。") //检查参数有效性 return} if(e<s){e=s;end.value=e} //如果结束行在开始行之前，强行调整参数 src.scrollTop=0 oTR.moveToPoint(startx,starty) //光标回到textarea内容的开头 st=conts[s-1] texpreStart=text.substr(0,st).replace(/\r/g,"") //自textarea内容的开头至选择起点前的字串，由于moveStart方法将 \n视为一个字符，需要修正计数 st=texpreStart.length oTR.moveStart("character",st) en=textLength if(e<conts.length)en=conts[e] texpreEnd=text.substr(0,en).replace(/\r/g,"") //自textarea内容的开头至选择结束点前的字串，由于moveEnd方法将 \n视为一个字符，需要修正计数 en=texpreEnd.length oTR.moveEnd("character", en-st) oTR.select() } } </script> 选中第<input name="start" value="3">行至第<input name="end" value="5">行 <button onclick="sele(start.value,end.value)">select</button>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]