快捷導(dǎo)航

vue處理emoji表情占位符的操作方法

更新時間：2024年06月30日 08:42:20 作者：cc_z

在計算字符數(shù)時,一般情況下,英文字符、數(shù)字和大部分符號都可以被視為占一個字符長度,因?yàn)樗鼈兪菃蝹€字節(jié),然而,對于某些特殊字符,如表情符號和部分非英文字符,會被認(rèn)為占據(jù)了多個字符長度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下

在計算字符數(shù)時，一般情況下，英文字符、數(shù)字和大部分符號都可以被視為占一個字符長度，因?yàn)樗鼈兪菃蝹€字節(jié)。然而，對于某些特殊字符，如表情符號和部分非英文字符（比如中文、日文等），由于它們的 Unicode 編碼需要多個字節(jié)來表示，因此在某些情況下會被認(rèn)為占據(jù)了多個字符長度。

對于表情符號（emoji）或者一些特殊符號，它們的 Unicode 編碼可能會采用代理對（surrogate pair）的形式來表示，這種形式將每個字符拆分為兩個 16 位的編碼單元，因此在某些計算中，每個代理對被視為占據(jù)了兩個字符長度。所以在這種情況下，為了準(zhǔn)確計算字符數(shù)，需要將表情符號或者特殊符號看做占據(jù)了兩個字符的長度。

在實(shí)際開發(fā)中，開發(fā)者根據(jù)需求來決定如何處理這些特殊字符的字符長度計算規(guī)則，有時候會采用每個特殊符號占據(jù)兩個字符的計算方式，以確保字符長度的準(zhǔn)確性。而有些情況下，開發(fā)者可能會希望每個特殊字符只占一個字符長度（比如用戶輸入限制），這需要根據(jù)具體業(yè)務(wù)需求來定義相應(yīng)的處理方法。

按照用戶輸入的內(nèi)容去計算字符數(shù)，原有是emoji表情跟中文都是占2字符的，現(xiàn)以1字符做處理。

寫一個包含表單內(nèi)容的 HTML 結(jié)構(gòu)，主要功能是要求用戶輸入功能介紹，并限制介紹內(nèi)容的長度不超過 120 個字。

        <div class="modify_content">
          <label class>請輸入功能介紹</label>
          <div class="frm_controls" style="position:relative">
            <div style="position: relative;">
              <el-input v-model="value" multi filter="trim"></el-input>
              <span class="input-tips">{{getLen(value)}}/120</span>
            </div>
            <p class="fail" v-if="getLen(value) > 120">
              <span>●</span>
              <span class="frm_msg_content">功能介紹長度不超過120個字</span>
            </p>
            <p class="frm_tips">請確認(rèn)介紹內(nèi)容不含國家相關(guān)法律法規(guī)禁止內(nèi)容</p>
          </div>
        </div>

這里獲取當(dāng)前內(nèi)容是調(diào)用了getLen的方法：

定義了一個對象 methods，其中包含了一個函數(shù) getLen(v)。這個函數(shù)的作用是獲取字符串 v 的長度，考慮到了表情字符的情況。

具體來說，函數(shù)內(nèi)部使用正則表達(dá)式 /[\uD800-\uDBFF][\uDC00-\uDFFF]|./g; 匹配字符串 v 中的 Unicode 字符，其中包括標(biāo)準(zhǔn)的字符以及代理對。然后使用 match 方法將匹配到的字符存儲在數(shù)組 surrogatePairs 中，或者若沒有匹配結(jié)果則賦值為空數(shù)組 []。

最后，函數(shù)返回數(shù)組 surrogatePairs 的長度，即字符的實(shí)際數(shù)量，來計算字符串 v 的實(shí)際長度（包括表情字符）。

  methods: {
    // 獲取字符長度
    getLen(v) {
      const regex = /[\uD800-\uDBFF][\uDC00-\uDFFF]|./g;
      const surrogatePairs = v.match(regex) || [];
      const actualLength = surrogatePairs.length; // 計算表情字符的實(shí)際長度
      return actualLength; // 按照長度計算
    },
  }