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

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

在計算字符數時,一般情況下,英文字符、數字和大部分符號都可以被視為占一個字符長度,因為它們是單個字節(jié),然而,對于某些特殊字符,如表情符號和部分非英文字符,會被認為占據了多個字符長度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下

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

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

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

按照用戶輸入的內容去計算字符數，原有是emoji表情跟中文都是占2字符的，現以1字符做處理。

寫一個包含表單內容的 HTML 結構，主要功能是要求用戶輸入功能介紹，并限制介紹內容的長度不超過 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">請確認介紹內容不含國家相關法律法規(guī)禁止內容</p>
          </div>
        </div>

這里獲取當前內容是調用了getLen的方法：

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

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

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

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