工作的小问题及解决
来源:互联网 发布:java夜校和java面授 编辑:程序博客网 时间:2024/04/28 04:45
ha<img title=":sunglasses:" alt="sung_lasses" src="http://local-dev.symphony.com:7070/cvsym/public/images/emoji/sunglasses.png" height="18px"><img title=":sunglasses:" alt="sunglasses" src="http://local-dev.symphony.com:7070/cvsym/public/images/emoji/sunglasses.png" height="18px">';
有一个如上的字符串,要求把里面的img标签替换为里面的alt属性
这个问题可以分成二步来完成
把img里面的title属性提取出来
替换img标签
var patt = new RegExp('alt=\"[a-z]*\_*[a-z]*\"',"g");var result = '';var emojiList = [];var i = 0;while ((result = patt.exec(str)) != null) { var ll = result.toString(); emojiList[i]=':'+ll.substring(5,ll.length-1)+':'; i++;}
把里面的img提取到数组中去
这里用到了exec方法以及全局模式
最后的结果是一个array
接下来是匹配标签
正则如下
var reg2 = /(<?|<\/)(td|tr|table|img).*?>/;
最后可以加个g表示全局模式
至于要用列表的每一项按顺序匹配的话需要一个小小的递归
完整代码
function clearTabs(){ var str = ' ha<img title=":sunglasses:" alt="sung_lasses" src="http://local-dev.symphony.com:7070/cvsym/public/images/emoji/sunglasses.png" height="18px"><img title=":sunglasses:" alt="sunglasses" src="http://local-dev.symphony.com:7070/cvsym/public/images/emoji/sunglasses.png" height="18px">'; var patt = new RegExp('alt=\"[a-z]*\_*[a-z]*\"',"g"); var result = ''; var emojiList = []; var i = 0; while ((result = patt.exec(str)) != null) { var ll = result.toString(); emojiList[i] = ':'+ll.substring(5,ll.length-1)+':'; i++; } j =0; var r2 = ''; process(str); return r2; function process(par){ if(j == emojiList.length){ console.log(par); r2= par; return; } var reg2 = /(<?|<\/)(td|tr|table|img).*?>/; par = par.replace(reg2,emojiList[j]); process(par,emojiList[++j]); } } alert(clearTabs());
replace方法
一般情况下是如下形式
str.replace(/reg/,str2);
然而str2可以用一个function来代替
var str = str.replace(reg,function(match,contents,offset,s){ return match.substring(2,match.length-2);});
结构功能也是一目了然
获取选中的文本
在做富文本输入框的时候,需要获取选中的文本(加个粗什么的)
getSelectedText:function() { if (window.getSelection) { // This technique is the most likely to be standardized. // getSelection() returns a Selection object, which we do not document. return window.getSelection().toString(); } else if (document.getSelection) { // This is an older, simpler technique that returns a string return document.getSelection(); } else if (document.selection) { // This is the IE-specific technique. // We do not document the IE selection property or TextRange objects. return document.selection.createRange().text; } }
如果要用上面的方法要保证焦点不会失掉
我用的是chrome,所以返回的一般是第一个
值得注意的是,如果你需要更多的属性,比如选中文本的起始位置,可以直接返回
window.selection对象,里面有baseOffset和focusOffset等属性,分别表示起始和结束位置,这两个值的大小关系取决于你鼠标选中的顺序(从前往后或从后往前),如果需要截取字符串,还需要做exchange操作
在实际操作中遇到过如下问题:
先从一个div里面把文本取出来
var str = $(".cvchat-post-text:not(.out-of-view)").html().trim();
这样存在一个问题,selection对象的offset是以第一个字符开始(不管是不是空格),空格占一个字符
这样直接提取可能造成1个空格符的偏差,而且chrome下面的空格是
用
转义的,也就是凭空多了5个字符,进行字符串截取的话要命
解决办法:再做一次字符串替换
str.replace(/ /g, " ");
富文本输入
基本思路,显示和传输分别搞
以emoji为例,发送和接收都是用类似:smile:的格式,其实偷懒的话在文本框里也这么显示就好,稍微复杂一点就把img用append加上去
传输的时候把img标签替换成相应的字符串,
接收的时候再换回来(真麻烦…)
加粗稍微麻烦一点,除了要获取选中的字符串之外,还要注意一次加粗之后,直接用html()方法获得的字符串的长度增加了(多了strong或h标签),再次截取就会出错,再有就是维持加粗状态问题,有待解决
- 工作的小问题及解决
- 工作中解决的小问题
- 工作中遇到的小问题及总结
- 自己工作中遇到的问题及解决总结
- 工作第一个项目遇到的问题及解决
- vc#.net2005开发中遇到的小问题及解决
- 初学WPF的各种小问题及解决
- 一个小问题的解决
- 一个小问题的解决
- 嵌入式小问题的解决
- 小问题的解决,小进步
- 20150420-20150424 一周工作问题及解决【共享文件的获取、前后台乱码问题解决等】
- [工作随笔]记录一个App项目所遇到的问题及解决
- 整理工作中遇到的小问题
- 工作中碰到的小问题
- 工作中遇到的小问题
- 工作中遇到的小问题
- 工作中常遇到的小白问题
- 脚本工具
- JS--获取元素
- Java文件操作(二)按照字符读写
- SMB CIFS Samba NFS NAS
- 四类文法
- 工作的小问题及解决
- jeecg3.6 maven版入门学习
- C++中的类所占内存空间总结
- 安卓数据库activeandroid框架
- 设置CATALINA_HOME环境变量
- 电力企业信息化建设方案之调度信息报送系统
- KING_Unity学习之UGUI_Canvas渲染顺序以及层次关系总结
- [Android]在安桌客户端解析json字符串
- centos添加普通用户,操作权限设置