Xữ lý load icon emoji ứng với ký tự tương ứng
Chào mọi người, hiện tại mình đang xây dựng ứng dụng chat và muốn handle hiển thị icon emoji ứng với key tương ứng như extension Chat++ này ạ. List icon emoji của mình đang lưu theo kiểu key:value, ví dụ key abc thì value là link hình ảnh tương ứng. Hiện tại mình đang xữ lý theo hướng hơi tù là ứng với mỗi message content thì mình lặp cái mảng emoji gặp cái key nào có trong mesage content thì mình replace bằng cái link rồi hiển thị ra, làm như vậy mình thấy rất chậm, kể cả lúc replace và lúc load ảnh emoji với link tương ứng. Mọi người có giải pháp nào hay hơn không cho mình lời khuyên với, cảm ơn (bow)
2 CÂU TRẢ LỜI
Chat++
thực tế là gọi hàm có sẵn trong phần code javascript của Chatwork
, nên bản thân trong source code của nó cũng không có phần handle replace link emoticons bạn ạ
Còn để thực hiện chức năng replace text emoticon với link image, bạn có thể dùng cách sau:
// Khai báo biến emoticons
var emoticons = [
{"key": "(vidieu)", "src": "https://i.imgur.com/WAz2V2F.jpg"},
{"key": "(boiroi)", "src": "https://i.imgur.com/Qnp4w95.jpg"},
];
function generateRegexFromString(string) {
return string.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
}
// Tạo ra một patterns regex duy nhất với tất cả các emo text
var patterns = [];
for (var i in emoticons) {
patterns.push('(' + generateRegexFromString(emoticons[i].key) + ')');
}
var emoticonsRegex = new RegExp(patterns.join('|'), 'g');
// Xử lý replace text emoticon bằng link image
contents.replace(emoticonsRegex, function (match) {
// Replacement logic here
});
trên đây là một đoạn code sơ sài, chủ yếu là để giải thích về ý tưởng tạo 1 regex duy nhất để replace theo regex đó, bạn thử tham khảo xem sao
Còn trong thực tế, bạn cần chú ý thêm một điều nữa là không được replace emo text bên trong thẻ <code>
, nên bạn cần thêm bước nữa là lọc ra content bên ngoài thẻ <code>
để mà replace nữa nhé
Mình làm được rồi, áp một cái regex cho tất cả các key nó nhanh hơn hẵn luôn, cảm ơn bạn nhiều (bow)
Bạn có thể tạo một regex cho tất cả các keys, search và replace 1 lần thôi.
P.S. Tác giả Chat++ chắc đang gõ câu trả lời cho bạn =)) @thangtd90