資訊專欄INFORMATION COLUMN
摘要：結合和簡單的正則就可以實現一個文本計算函數其實當字符計算解決后，輸入框限制字符數就輕而易舉了。思路就是每次事件發生時，先判斷當前字符數是否超過限制，如果超出，則用上一次的文本替換當前輸入框的文本。
一個emoji文本用javascript該如何正確計算其文本長度？
最容易想到的自然是用length來求長度。以下列舉常見emoji和復雜emoji。
// size: 2 "?".length // size: 7 "????".length
由于JavaScript的字符編碼問題，自然行不通。詳情請參見文章末尾的博文。
基于常見的emoji可以使用以下正則匹配。
// 匹配UTF-16的代理對，把代理對改為一個BMP的字符
function countSymbols(string) {
var regexAstralSymbols = /[uD800-uDBFF][uDC00-uDFFF]/g;
return string.replace(regexAstralSymbols, "_").length;
}
countSymbols("?"); // size: 1
countSymbols("????"); // size: 4
但是仍然出現了問題。那么一些更復雜的emoji表情的時候，還是掛掉了。????這個表情其實是蘋果中表情農民，在Full Emoji List, v5.0里第218個表情。此表情由U+1F468 U+1F3FC U+200D U+1F33E組成。所以直接求長度為 2 + 2 + 1 + 2 = 7。這也在所難免了。
那么該做如何解？
這時候社區里有twitter的關于emoji的一個工具庫twemoji，利用這個工具庫，可以方便的實現emoji文本的實現。
twemoji.parse("????")
// ""
因此可見。twemoji正確的識別了并達到了我們的預期。用戶任意輸入一個emoji，我們都只計算為一個長度。利用twemoji解析emoji并返回圖片的特性，結合正則可以實現一個函數。
function countSymbols(string) {
return twemoji.parse(string).replace(//g, "_").length;
}
countSymbols("?"); // size: 1
countSymbols("????"); // size: 1
好的問題解決了。結合twemoji和簡單的正則就可以實現一個文本計算函數
countSymbols("???? and ? parse correctly!"); // size: 24
其實當字符計算解決后，輸入框限制字符數就輕而易舉了。思路就是每次input事件發生時，先判斷當前字符數是否超過限制，如果超出，則用上一次的文本替換當前輸入框的文本。大致代碼如下。
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;
}
}
希望能給大家帶來點幫助。求點贊哈哈~
Unicode與JavaScript詳解
Emoji.prototype.length —— Unicode 字符那些事兒
JavaScript 有個 Unicode 的天坑
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90000.html
摘要：也可以通過和屬性來設置文本域的尺寸，但是屬性設置不太標準，最好的方法是通過設置。設置里默認大小的文本域實際頁面效果屬性用于設置文本域可見文本的行數。此外，屬性也適用于文本域。 1.表單元素 HTML 表單用于收集用戶輸入。 代碼示例： 常用屬性解釋： action屬性定義在提交表單時執行的動作通常，表單會被提交到 web 服務器上的網頁。在上面的例子中，指定了某個服務...
摘要：但是有時候我們需要實現文本框中輸入中文長度是或是，其他非中文輸入是。因為中文輸入法的在非正式輸入時，對于我們這個算法，會出現剩余字符數為負值的情況。 textarea,input輸入字符數限制。 在做開發時，有一種需求是對輸入框(input,textarea)的字數做限制。如果按照JS的規定，字符串里所有的字符，長度都是1。但是有時候我們需要實現文本框中輸入中文長度是2（或是３），...
摘要：由于我們的富文本輸入框比較簡單，所以只需要處理兩類數據即可，其一是普通的文本類型數據，包括表情其二則是圖片類型數據。 最近折騰 Websocket，打算開發一個聊天室應用練練手。在應用開發的過程中發現可以插入 emoji ，粘貼圖片的富文本輸入框其實蘊含著許多有趣的知識，于是便打算記錄下來和大家分享。 倉庫地址：chat-input-box預覽地址：https://codepen.io...
摘要：一需求闡述和常用的解決方案制作一個文本框限制最大字數，實時監聽當前已經輸入的字數，并顯示出來。因此單純的監聽事件顯示是不夠的。如果頁面里需要多個文本框都要限制字數如何實現。 一、需求闡述和常用的解決方案 制作一個文本框限制最大字數，實時監聽當前已經輸入的字數，并顯示出來。期初我實現這個功能的方法很簡單：給textarea控件添加onkeyup事件方法，在方法中將textarea值的長度...
閱讀 4221·2021-09-26 10:17
閱讀 871·2021-09-22 15:02
閱讀 3446·2021-09-06 15:00
閱讀 1055·2021-07-25 16:52
閱讀 2734·2019-08-29 16:16
閱讀 2515·2019-08-29 13:25
閱讀 1588·2019-08-26 13:51
閱讀 2182·2019-08-26 10:58
