最近專案中遇到一個問題，微信暱稱中的特殊字元不能正常顯示，比如表情，各種笑臉、小動物、愛心之類的。

最恨這些標新立異的人，老老實實輸入名字不行麼，非要輸入表情，o(╥﹏╥)o

後臺的小夥伴將微信暱稱中的特殊字元轉換成html實體編碼（例如：“哆啦A夢😜😜”）。

這個展示還不簡單隨便放入一個html標籤就可以正常展示了：

<div>Jerry&#128540;&#128063;</div>

如圖：

在vue專案中也好說，只要使用v-html指令就可以輕鬆搞定：

<div v-html="name"></div>


data () {
    return {
       name:'哆啦A夢&#128540;&#128540;'
    }
}

如圖：

問題就在於，微信暱稱需要可編輯，但是input的value屬性只能識別字符串，無法正確解析html實體：

<input class="editSpan" type="text" :value="name">

如圖：

沒辦法需求還是要實現的，找度娘、跟同事請教，最後總結出兩個解決方案。

解決方案一：利用HTML 5 全域性 contenteditable 屬性。

定義和用法

contenteditable 屬性規定是否可編輯元素的內容。

HTML 4.01 與 HTML 5 之間的差異

contenteditable 屬性是 HTML5 中的新屬性。

語法

<element contenteditable="value">

屬性值

值	描述
true	規定可以編輯元素內容。
false	規定無法編輯元素內容。
classname	繼承父元素的 contenteditable 屬性。

廢話不多說上程式碼：

給span標籤新增contenteditable屬性後，可以利用input及blur事件實現類似雙向繫結的效果（假象，不要當真）

html部分程式碼

<h4>解決方案1</h4>
<br>
<div>
    <span class="editSpan" contenteditable="true" style="-webkit-user-select: text;" id="name" @input="getName($event)" @blur="getName($event)">哆啦A夢&#128540;&#128540;</span>
    <div>{{spanVal}}</div>
</div>

js部分程式碼

data(){
    return {
      name:'哆啦A夢😜😜',
      nameVal:'',
      spanVal:''
    }
  },
  methods: {
    getName(evt){
      console.log(evt.target.innerHTML)
      this.spanVal = evt.target.innerHTML } },

style部分程式碼


.editSpan{
  display: block;
  width: 80%;
  height:2.5rem;
  line-height: 2.5rem;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
  margin: auto;
}　

 本來想放一段錄屏看一下效果，原諒我不會新增視訊到文章裡，只能小夥伴自己動手實現了。

如圖：

解決方案二：先在html標籤中解析，再將解析後的值賦值給input的value屬性。

html部分

<h4>解決方案2</h4>
    <br>
    <div>
      <input class="editSpan" type="text" :value="nameVal">
      <span class="hidden" v-html="name" ref="name"></span>
    </div>

js部分

data(){
    return {
      name:'哆啦A夢&#128540;&#128540;',
      nameVal:'',
      spanVal:''
    }
  },

  mounted () {
    this.nameVal = this.$refs.name.innerHTML
  }

style部分

如圖：

由於我的專案佈局已經成型，不想改動太大所以採用的第二種解決方案。個人覺得第一種解決方案很適合自定義表單輸入元件呢，有時間可以試試。

以上就是我對於微信暱稱特殊字元前端顯示問題的記錄總結，如果有更好的解決方案，還請多多指教啊。