Js聊天项目-删除输入聊天的emoji表情

Posted 2023-04-08 iamzheng

Js聊天软件-删除输入文字中emoji表情的处理

1.问题描述

当我们点击右下角的删除键，希望删去这个表情时，会出现这种情况

​

这种情况是，当我们点击删除按钮时，就删除最后一个字符，但emoji表情占位可不止一个字符，但如果删除长度固定成emoji表情的长度，文本内容就不能正常删除了，下面时这样上述图片处理的代码

deleteMessage()
    //点击删除键，就删除消息的最后一个字符
    this.message.substring(0,this.message.length-1)

2.我的处理方式

这是我使用的处理方式

deleteMessage()
	let strArr = Array.from(this.message)
	console.log(strArr)
	strArr.pop()
	this.message = strArr.join(\'\');//将数组还原成字符串

			

因为，Array.form会将我们的字符串拆分为数组，而它对emoji处理为单个元素

这是打印出拆分数组的样子

swift 聊天表情emoji转译——从转译文字到聊天列表

承接《swift 聊天表情emoji转译（一）》，  这篇文章主要实现例如：

哈哈[haha][meigui]，你好啊[meigui]。

显示成：

哈哈😄🌹，你好啊🌹。

直接看代码：

 
let customEmojiArray = ["签到", "明白", "能", "赞", "1", "2",
                  "666", "比心", "送花花",  "谢谢老师",
                  "听懂了", "老师辛苦了", "讲得好",
                  "slime","laugh", "love", "tongue", "daze", "handclap", "titter", "handssors",
                  "six", "heart", "melon", "silly", "like", "dog", "expect", "flower"]


    // 解析消息 获取图文混排字符串
    // 例如：哈哈[haha][meigui]，你好啊[meigui]
    // 显示成：哈哈😄🌹，你好啊🌹
    func getMsgAttrText(msg: String) -> NSMutableAttributedString 
        
        // 创建一个临时字符串
        var tempText = msg

        // 获取所有表情range
        var allRanges: [NSRange] = []
        // 在表情数组中遍历
        for str in customEmojiArray 

            // 一个表情
            let newStr = "[\\(str)]"
            // 如果字符串中包含表情，把表情位置加入到数组中，并把已经加入的替换成"#\\(str)#"。这样下次就不会遍历该表情了。
            var range = tempText.range(of: newStr)

            // 一个表情可能重复多次，把一个表情在字符串中的所有位置都找出来。
            while range != nil 
                let newRange = NSRange(range!, in: tempText)
                allRanges.append(newRange)
                tempText.replaceSubrange(range!, with: "#\\(str)#")
                range = tempText.range(of: newStr)
            
        
        
        // 如果没有表情，直接返回
        if allRanges.count == 0 
            return NSMutableAttributedString(string: msg)
        
        
        // 位置排序，allRanges中的表情位置不是按顺序加入的
        let newRanges = allRanges.sorted  range1, range2 in
            range1.location < range2.location
        
        
        // 根据位置，获取该位置的图片名字
        var imageStrs: [String] = []
        for range in newRanges 

      // 安全性判断
            if range.location >= msg.count || range.location + range.length - 1 >= msg.count || range.length < 3 
                continue
            
            let index3 = msg.index(msg.startIndex, offsetBy: range.location)
            let index4 = msg.index(msg.startIndex, offsetBy: range.location + range.length - 1)

            // 这里按顺序获取了emoji名称，例如：[haha]
            let str = msg[index3...index4]
            // 删除前后的[]，只把名字加入数组。或者用removeFirst，removeLast方法
            let str1 = str.replacingOccurrences(of: "[", with: "")
            let str2 = str1.replacingOccurrences(of: "]", with: "")
            imageStrs.append(String(str2))
        
        
        // 构造图文混排字符
        let attrStr = NSMutableAttributedString(string: msg)
        
        var space = 0
        for (i, imageStr) in imageStrs.enumerated() 
            
            guard let image = UIImage(named: imageStr) else  continue 
            // 构造emoji富文本
            let imgStr = getImageAttachString(image: image)
            
            // 在图片位置上把[haha]替换成😄
            let range = newRanges[i]
            attrStr.replaceCharacters(in: NSRange(location: range.location - space, length: range.length), with: imgStr)
            
            // 原本[haha]的长度是range.length这么长，替换成😄（长度为1，或者用imgStr.length）之后，字符串长度减少了range.length - 1。所以第二个要替换文本的location是range2.location - space
            space = space + range.length - 1
        
            

        // 解析完成
        return attrStr
    
        

    // 构造图片富文本
    func getImageAttachString(image: UIImage) -> NSMutableAttributedString 
        let newH = 18.0
        let newY = roundf(Float(font.capHeight - newH))/2.0
        let newW = newH * image.size.width / image.size.height
        let attach = NSTextAttachment()
        attach.image = image
        attach.bounds = CGRect(x: 0, y: Double(newY), width: newW, height: newH)
        let imgAttrText = NSMutableAttributedString(attachment: attach)
        return imgAttrText