資訊專欄INFORMATION COLUMN
摘要：結(jié)合和簡(jiǎn)單的正則就可以實(shí)現(xiàn)一個(gè)文本計(jì)算函數(shù)其實(shí)當(dāng)字符計(jì)算解決后，輸入框限制字符數(shù)就輕而易舉了。思路就是每次事件發(fā)生時(shí)，先判斷當(dāng)前字符數(shù)是否超過限制，如果超出，則用上一次的文本替換當(dāng)前輸入框的文本。
一個(gè)emoji文本用javascript該如何正確計(jì)算其文本長(zhǎng)度？
最容易想到的自然是用length來求長(zhǎng)度。以下列舉常見emoji和復(fù)雜emoji。
// size: 2 "?".length // size: 7 "????".length
由于JavaScript的字符編碼問題，自然行不通。詳情請(qǐng)參見文章末尾的博文。
基于常見的emoji可以使用以下正則匹配。
// 匹配UTF-16的代理對(duì)，把代理對(duì)改為一個(gè)BMP的字符
function countSymbols(string) {
var regexAstralSymbols = /[uD800-uDBFF][uDC00-uDFFF]/g;
return string.replace(regexAstralSymbols, "_").length;
}
countSymbols("?"); // size: 1
countSymbols("????"); // size: 4
但是仍然出現(xiàn)了問題。那么一些更復(fù)雜的emoji表情的時(shí)候，還是掛掉了。????這個(gè)表情其實(shí)是蘋果中表情農(nóng)民，在Full Emoji List, v5.0里第218個(gè)表情。此表情由U+1F468 U+1F3FC U+200D U+1F33E組成。所以直接求長(zhǎng)度為 2 + 2 + 1 + 2 = 7。這也在所難免了。
那么該做如何解？
這時(shí)候社區(qū)里有twitter的關(guān)于emoji的一個(gè)工具庫twemoji，利用這個(gè)工具庫，可以方便的實(shí)現(xiàn)emoji文本的實(shí)現(xiàn)。
twemoji.parse("????")
// ""
因此可見。twemoji正確的識(shí)別了并達(dá)到了我們的預(yù)期。用戶任意輸入一個(gè)emoji，我們都只計(jì)算為一個(gè)長(zhǎng)度。利用twemoji解析emoji并返回圖片的特性，結(jié)合正則可以實(shí)現(xiàn)一個(gè)函數(shù)。
function countSymbols(string) {
return twemoji.parse(string).replace(//g, "_").length;
}
countSymbols("?"); // size: 1
countSymbols("????"); // size: 1
好的問題解決了。結(jié)合twemoji和簡(jiǎn)單的正則就可以實(shí)現(xiàn)一個(gè)文本計(jì)算函數(shù)
countSymbols("???? and ? parse correctly!"); // size: 24
其實(shí)當(dāng)字符計(jì)算解決后，輸入框限制字符數(shù)就輕而易舉了。思路就是每次input事件發(fā)生時(shí)，先判斷當(dāng)前字符數(shù)是否超過限制，如果超出，則用上一次的文本替換當(dāng)前輸入框的文本。大致代碼如下。
var prevText = "";
var textarea = document.getElementById("input-area");
var limit = 250;
function limitTextSize(){
var text = textarea.value;
var size = countSymbols(text);
if(size > limit) {
textarea.value = prevText;
} else {
prevText = text;
}
}
希望能給大家?guī)睃c(diǎn)幫助。求點(diǎn)贊哈哈~
Unicode與JavaScript詳解
Emoji.prototype.length —— Unicode 字符那些事兒
JavaScript 有個(gè) Unicode 的天坑
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90000.html
摘要：也可以通過和屬性來設(shè)置文本域的尺寸，但是屬性設(shè)置不太標(biāo)準(zhǔn)，最好的方法是通過設(shè)置。設(shè)置里默認(rèn)大小的文本域?qū)嶋H頁面效果屬性用于設(shè)置文本域可見文本的行數(shù)。此外，屬性也適用于文本域。 1.表單元素 HTML 表單用于收集用戶輸入。 代碼示例： 常用屬性解釋： action屬性定義在提交表單時(shí)執(zhí)行的動(dòng)作通常，表單會(huì)被提交到 web 服務(wù)器上的網(wǎng)頁。在上面的例子中，指定了某個(gè)服務(wù)...
摘要：但是有時(shí)候我們需要實(shí)現(xiàn)文本框中輸入中文長(zhǎng)度是或是，其他非中文輸入是。因?yàn)橹形妮斎敕ǖ脑诜钦捷斎霑r(shí)，對(duì)于我們這個(gè)算法，會(huì)出現(xiàn)剩余字符數(shù)為負(fù)值的情況。 textarea,input輸入字符數(shù)限制。 在做開發(fā)時(shí)，有一種需求是對(duì)輸入框(input,textarea)的字?jǐn)?shù)做限制。如果按照J(rèn)S的規(guī)定，字符串里所有的字符，長(zhǎng)度都是1。但是有時(shí)候我們需要實(shí)現(xiàn)文本框中輸入中文長(zhǎng)度是2（或是３），...
摘要：一需求闡述和常用的解決方案制作一個(gè)文本框限制最大字?jǐn)?shù)，實(shí)時(shí)監(jiān)聽當(dāng)前已經(jīng)輸入的字?jǐn)?shù)，并顯示出來。因此單純的監(jiān)聽事件顯示是不夠的。如果頁面里需要多個(gè)文本框都要限制字?jǐn)?shù)如何實(shí)現(xiàn)。 一、需求闡述和常用的解決方案 制作一個(gè)文本框限制最大字?jǐn)?shù)，實(shí)時(shí)監(jiān)聽當(dāng)前已經(jīng)輸入的字?jǐn)?shù)，并顯示出來。期初我實(shí)現(xiàn)這個(gè)功能的方法很簡(jiǎn)單：給textarea控件添加onkeyup事件方法，在方法中將textarea值的長(zhǎng)度...
閱讀 4352·2021-09-26 10:17
閱讀 941·2021-09-22 15:02
閱讀 3561·2021-09-06 15:00
閱讀 1126·2021-07-25 16:52
閱讀 2818·2019-08-29 16:16
閱讀 2588·2019-08-29 13:25
閱讀 1646·2019-08-26 13:51
閱讀 2243·2019-08-26 10:58
