快捷導(dǎo)航

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

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

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

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

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

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

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

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

        <div class="modify_content">
          <label class>請(qǐng)輸入功能介紹</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">功能介紹長(zhǎng)度不超過120個(gè)字</span>
            </p>
            <p class="frm_tips">請(qǐng)確認(rèn)介紹內(nèi)容不含國(guó)家相關(guān)法律法規(guī)禁止內(nèi)容</p>
          </div>
        </div>

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

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

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

最后，函數(shù)返回?cái)?shù)組 surrogatePairs 的長(zhǎng)度，即字符的實(shí)際數(shù)量，來計(jì)算字符串 v 的實(shí)際長(zhǎng)度（包括表情字符）。

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