工作的小问题及解决

Posted 2022-12-11 水上由岐

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 = '&nbsp;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标签），再次截取就会出错，再有就是维持加粗状态问题，有待解决