window.getSelection()相关
来源:互联网 发布:mac如何隐藏dock栏 编辑:程序博客网 时间:2024/06/01 22:24
昨天晚上折腾了几个小时加今天的半天,终于搞定了这个问题
不得不感慨,就算看起来再微小的需求,实现起来还真得花一番功夫
只做了一点微小的工作,很是惭愧
现在的解决方案,div输入的字符串的每一位都映射到一个数组
元素有两种状态,0表示正常显示,1表示需要被加粗,由此可以推出多种状态,如果某段字符串被选中,它在数组内的对应元素就会被设置成相对的状态码
再根据这个数组来渲染innerHTML
为此需要获得选中字符串精确的位置
然而Window.getSelection()获得的偏移量是相对于上个元素
例如innerHTML
ab<strong>cdef</strong>gh
如果我们选中gh,获得的偏移量是0和2
在设置元素的时候就会跑到ab上
仔细看了每一个属性之后,有如下方法
var range = window.getSelection().getRangeAt(0); var offset = 0; var str = ''; var container = range.startContainer; while(container.previousSibling){ console.log(container.previousSibling.textContent.trim()); console.log(container.previousSibling.textContent.trim().length); str += container.previousSibling.textContent.trim(); offset += container.previousSibling.textContent.trim().length; container = container.previousSibling; }
最后得出的offset就是相对整个字符串的偏移量
这样接下来的工作就简单了
renderBoldv3:function(){ var selection = CVChat.post.getSelectedText(); var range = CVChat.post.getSelectedText().getRangeAt(0); if(range.endContainer.parentNode != range.startContainer.parentNode) return; var begin = range.startOffset; var end = range.endOffset; if(begin>end){ var tmp = begin; begin = end; end = tmp; } var offset = 0; var str = ''; var container = range.startContainer; while(container.previousSibling){ console.log(container.previousSibling.textContent.trim()); console.log(container.previousSibling.textContent.trim().length); str += container.previousSibling.textContent.trim(); offset += container.previousSibling.textContent.trim().length; container = container.previousSibling; } var str = $(".cvchat-post-text:not(.out-of-view)").text().trim(); //console.log(str.length); for(i = 0;i<str.length;i++){ if(CVChat.post.msgFlag[i] == undefined) CVChat.post.msgFlag[i] = 0; } console.log('offset: '+offset+' begin: '+begin +' end: '+end); for(var i = offset+begin;i<offset+end;i++){ CVChat.post.msgFlag[i] = 1; } var finalStr = ''; if(CVChat.post.msgFlag[0] == 1){ finalStr+='<strong>'; } for(i=0;i<str.length-1;i++){ finalStr+=str[i]; if(CVChat.post.msgFlag[i] == 0 && CVChat.post.msgFlag[i+1] ==1 ){ finalStr+='<strong>'; } if(CVChat.post.msgFlag[i]==1 && CVChat.post.msgFlag[i+1] ==0 ){ finalStr+='</strong>'; } } finalStr+=str[i]; if(CVChat.post.msgFlag[i] == 1){ finalStr+='</strong>'; } console.log(CVChat.post.msgFlag); console.log(finalStr); $(".cvchat-post-text:not(.out-of-view)").html(finalStr); }
0 0
- window.getSelection()相关
- window.getselection()失效?
- document.selection和window.getSelection属性和方法详解
- 屏幕取词: window.getSelection和document.selection
- window相关
- 使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题
- window.showModalDialog()、window.showModelessDialog() 相关
- getSelection 简单例子
- javascript getSelection 用法
- window装机相关
- window相关属性
- JS:window对象相关
- window.open()相关属性
- Window线程相关
- Window串口相关API
- document.getSelection,document.selection.createRange
- document.getSelection,document.selection.createRange
- getSelection 选中文字分享效果
- Spark 提交任务时,报: Invalid signature file digest for Manifest main attributes
- 几行代码实现tab+fragment+viewpager---还有酷炫的动画效果哦
- CMS用通用图片轮换flash幻灯片播放器:Bcastr3和Bcastr4
- python数据分析之kDD(二)
- log4j.properties配置文件配置项的说明
- window.getSelection()相关
- Android 轮播图---ViewFlipper
- Android基于插件化的技术二
- tomcat8 实现的websock,可以跨域哦
- postman & rest easy
- IMS
- nodejs+mongodb系列教程之(1/5)--开篇总述
- 关于Oracle中in和exists的区别
- Ubuntu 14.04 使用速度极快的Genymotion 取代蜗牛速度的原生AVD模拟