textarea_javascript 기술의 직관적인 줄 바꿈에 대한 일부 연구 자료

이틀 전에 텍스트 영역의 직관적인 행 줄 바꿈 규칙을 연구했습니다.

직관적인 행을 선택하는 방법은 열 크기뿐 아니라 웹페이지 인코딩 방법에 따라 달라집니다. ​​
cols="30"의 텍스트 영역은 실제로 한 줄에 29개의 반각 문자를 수용할 수 있습니다. 전각 문자 수는 반드시 결정되는 것은 아니며 웹 페이지의 인코딩 방법과 관련이 있습니다.
IE6.0의 실제 측정에서는 빨간색 텍스트(빨간색 텍스트가 다음 줄로 접혀 있음)에서 시각적 줄바꿈이 발생합니다.

dddddddddddddddddddddddd //전각 뒤에 이어지는 연속된 반각 내용은 단어의 길이를 수용할 수 없을 경우 나머지 위치를 감싸야 한다는 특수 규칙입니다.

웹 페이지를 유니코드로 인코딩할 때("Run Code"의 팝업 페이지는 이렇게 인코딩되고, JS에서 생성된 페이지는 이렇게 인코딩됩니다) 일반적인 규칙은

("full"은 뒤에 오는 내용에 관계없이 전체 너비, 반 너비 문자가 모두 래핑되어야 함을 의미합니다.)

123456789012345678901234567890 //29 반 너비가 가득 참
12345678911234567890 / /17 전각 가득
일 둘 셋 넷 다섯 여섯 일곱 여덟 구십일 이삼 넷 다섯 여섯 일곱 여덟 구십
일 둘 셋 넷 다섯 여섯 일곱 여덟 구십일 둘 셋 넷 다섯 여섯 일곱 여덟 구십
🎜 >0 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 하나 둘 셋 넷 다섯 여섯 하나 일곱 여덟 구십 //16 전각, 1 반각 사용
0 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 열한 둘 셋 4 5 6 7 8 90
0 1 2 3 4 5 6 7 8 91 2 3 4 5 1 6 7 8 90 //15 전자, 2 반각 이후에는 전자가 허용되지 않습니다
01 하나 둘 셋 넷 다섯 여섯 일곱 여덟 구십일 이삼 넷 다섯 여섯 일곱 여덟 구십
01 하나 둘 셋 넷 다섯 여섯 일곱 여덟 구십일 둘 셋 넷 다섯 여섯 여섯 일곱 여덟 구십 // 15 전각, 2 반각 사용 가능 또 다른 반각 허용(반각이 1개 이상인 경우 특수 규칙 A 준수)
012 하나, 둘, 셋, 넷, 다섯, 여섯, 일곱, 여덟, 구십, 하나, 2, 3, 4, 5, 6, 7, 8, 90 // 전각 15개, 반각 3개가 사용됨
012 하나 둘 셋 넷 다섯 여섯 일곱 여덟 구십일 둘 셋 넷 다섯 셋 여섯 일곱 여덟 구십
0123 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아흔한 열한 둘 셋 넷 다섯 여섯 일곱 여덟 구십 //14 전각, 4 이후에는 반각, 전각 불가
0123 하나, 둘, 3, 4, 5-6, 7-8, 91, 2, 3, 4, 5-6, 7-8-90 // 14 전각, 4 반각 이후 1 반각 가능 1개 이상 수용(반각 A의 특별 규정에 따름)
01234 하나, 둘, 셋, 넷, 다섯, 여섯, 일곱, 여덟, 아흔, 하나, 둘, 셋, 넷, 다섯, 여섯, 일곱 , 8, 90 // 14 전각, 5 반각 점유
01234, 1-2-3-4-5-6 7 8 91 2 3 4 5 6 7 8 90
012345 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 90 //13 전각, 전각은 6 반자 이후에는 허용되지 않음
012345 123456789112364567890 //13 전각, 6 반자 이후 -폭, 반폭 1개 수용 가능(반폭 1개 초과 시 특별 규칙 A 적용)
0123456 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 하나 둘 셋 넷 다섯 여섯 일곱 여덟 구십 //13 전각, 7 반각 점유
0123456 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 열한 둘 셋 일곱 넷 다섯 여섯 일곱 여덟 구십
01234567 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아흔 하나 둘 셋 넷 다섯 6 7 8 90 // 12 전각, 8 반폭 사용
01234567 1 2 3 4 5 67 8912834567890
0123456781234567891234567890//11 전각, 9 반각 뒤에는 전각이 올 수 없습니다. width
012345678 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 하나 아홉 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 열 //11 전각, 반각 9개 이후에는 반각 1개 수용 가능(1개 이상인 경우) 반각, 특수 규칙 A 적용)
0123456789 일 둘 셋 넷 다섯 여섯 일곱 여덟 아흔일 둘 삼 넷 다섯 여섯 일곱 여덟 구십 //11 전각, 10 반각 점유

......

0 일 이 삼 사 56789123451267890 //15 전각, 반각 1개 이후 연속된 반각 2개 문자 수용 가능(반각 2개 이상일 경우 특칙 A 적용) -너비 사용) 이 항목은 전각 15개, 반각 3개를 채워서

...

0개, 둘, 셋, 넷, five, six, Seven,ight, ninety, one, two, three, four, 1234, five, six, July,ight, ninety // 전각 14개, 반각 1개 연속된 반각 문자 4개를 수용할 수 있습니다( 반각이 4개보다 많으면 특수 규칙 A를 따릅니다. 14개의 반각과 5개의 반각에서 얻을 수 있습니다.

...

01 하나 둘 셋 넷 567891234234567890 //14 전각, 반각 2개 이후, 반각 연속 문자 3개 수용 가능(반각 3개 이상일 경우 특칙 A 적용), 본 항목은 전각 14개, 반각 14개로 구성 가능, 5 반각을 채워

...
줄 바꿈 위치는 줄 바꿈 위치 앞의 텍스트 줄 전체와 관련될 뿐만 아니라 빨간색 텍스트(종종 전체 너비 텍스트는 다음 줄의 위쪽 줄 끝 부분에서 압착될 수 없기 때문에 접혀집니다.

요약:


CODE:[클립보드에 복사]x 전폭, y 반폭 차지 = x 전폭, y-1 반폭은 전폭 이후에 수용할 수 없음 = x 전각, y-n 반각 문자 이후 n 개의 반각 연속 문자를 수용할 수 있습니다(반각 문자가 n 개보다 많은 경우 특수 규칙 A 적용).
그러니 실험을 통해 '전체' 상황을 모두 알아보세요.

이제 cols=30 및 웹페이지가 유니코드로 인코딩된 경우 "전체" 상황을 나열하세요.

17 전폭
16 전폭, 1 반폭
전각 15개, 반각 3개
전각 14개, 반각 5개
전각 13개, 반각 7개
전각 12개, 반각 8개
전각 11개 --폭, 10 반폭
10 전폭, 12 반폭
9 전폭, 13 반폭
8 전폭, 15 반폭
7 전폭 , 반각 17
전각 6개, 반각 19
전각 5개, 반각 21
전각 4개, 반각 22
전각 3개, 반각 24 반각
전각 2개, 반각 26
전각 1개, 반각 28
반각 29개

줄바꿈이 있는 상황을 이용하여 특수 규칙 A에 따라 발생 직전의 경우 모든 "가득한" 상황을 쉽게 감지할 수 있습니다.
예를 들어 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 열 012345678912 하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 십 // 10 전각, 12 반각 점유
하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 열 0123456789123 일 둘 셋 넷 다섯 Sixty-seven, Augusty-ninety // 빨간색 단어는 특수 규칙에 따라 줄 바꿈됩니다. A, 파란색 단어는 전폭 9이고, 반폭 13은

cols=30 줄을 묶는 데 사용됩니다. 웹 페이지가 GB2312에 따라 인코딩되면 "전폭" 규칙은 다음과 같습니다. :

전각 14개, 반각 1개
전각 13개, 반각 3개
전각 12개, 반각 5개
전각 11개, 반각 7개
전각 10개, 반각 9개
전각 9개, 반각 11
전각 8개, 반각 13
전각 7개, 반각 15개 -너비
6 전각, 17 반자
5 전폭, 19 반자
4 전폭, 21 반폭
3 전폭, 23 반폭
전각 2개, 반각 25
전각 1개, 반각 27
반각 29

이 경우 "전체" 규칙만 측정할 수 있습니다. 웹페이지의 인코딩 방식과 컬럼을 기반으로 한 실험을 통해.

텍스트 영역 콘텐츠의 시작 부분부터 전자 및 반자 문자 수를 세고 "전체" 규칙과 특수 규칙 A에 따라 첫 번째 시각적 줄 바꿈 위치를 결정한 다음 시작합니다. 두 번째 줄(물리적 줄과 시각적 줄 포함)부터 전각 및 반각 문자의 수를 세고, "전체" 규칙 및 특수 규칙 A에 따라 두 번째 직관적인 줄 바꿈 위치를 결정합니다. ..텍스트 영역 콘텐츠가 끝날 때까지 이런 방식으로 계속합니다. 이러한 방식으로 모든 줄바꿈 위치를 얻을 수 있습니다.

물론 실제 애플리케이션에서는 이 실험을 수행할 필요도 없고 가능하지도 않습니다. 예를 들어 텍스트 영역의 X에서 Y 행을 선택하는 경우는 아직 공식적인 방법을 배우지 않았습니다.

<textarea rows="5" cols="30" id="abc"> 할아버지는 제가 여자친구를 데리고 낚시하러 간다는 소식을 듣고 만나고 싶어 하셨습니다. 여자친구를 먼저 데리고 거기에 갔더니 할아버지를 기다리는 동안 벌써 18kg짜리 배스를 잡았습니다. 할아버지가 오셨을 때 나는 여자 친구를 그에게 소개하고 물고기를 들고 보여주었습니다. 정말 좋아요! 그는 어떻게 잡았나요? 지렁이를 사용하세요. 나는 대답했다. 이상하다, 그는 일부러 진지하게 말했다. 우리 세대는 적어도 한 끼의 식사와 영화를 볼 수 있습니다! <input name="start" value="3"> 행 <input name="end" value="5">에서 행 <button onclick="sele(start.value,end.value)">으로 선택 </button>선택
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

2004년 초에 제가 쓴 글은 현재 가장 포괄적인 연구여야겠죠? ?

<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> 현재 직위: 실제 행: 실제 열: 표시 행: 표시 열: 오류 메시지: <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需刷新才能执行]