VueJS и проблема кодировки UTF-8: правильное форматирование пользовательской копии и вставленного текста

Question

Я использую API данных, который возвращает текст следующим образом (из архивной c базы данных):

I’m attaching a couple of our “quick look� cards covering the process

Обратите внимание на символы ’ в тексте. Похоже, что, возможно, пользователь скопировал и вставил текст из сообщения электронной почты (внешний вид) или Microsoft Word, и это похоже на замену запятой или апострофом (или кто знает что еще)?

Похоже на это это то, что нужно заменить:

[{broken: '–',    fixed: "—"}
 {broken: "—",    fixed: "–"}
 {broken: "‘",    fixed: "‘"}
 {broken: "’",    fixed: "’"}
 {broken: "“",    fixed: "“"}
 {broken: "â€", fixed: "”"}, ...]

Есть ли что-то, что я могу сделать на переднем конце, чтобы заменить эти символы на правильный символ?

Answer 1

Это звучит как проблема кодирования и описывается здесь , и, как вы также описали, сокращено до нескольких символов:

Следующие символы не работают, в то время как другие символы отображается правильно:

€ ‚ ƒ „ … † ‡ ˆ ‰ Š ‹ Œ Ž ‘ ’ “ ” • – — ˜ ™ š › œ ž Ÿ.

Также имеется отладочный лист для поиска ожидаемых символов в UTF-8.

Так что, возможно, решением было бы заменить этот список символов после получения данных из API или обработки их с помощью функции.

Я сделал fiddle с заменой этих символов на функцию replaceEncodingErrorCharsInString():

new Vue({
  el: "#app",
  data: {
    encodingReplacement: [
    {
        broken: '–',
        fixed: "—"
        }, 
    {
      broken: "—",
      fixed: "–"
    }, {
      broken: "‘",
      fixed: "‘"
    }, {
      broken: "’",
      fixed: "’"
    }, {
      broken: "“",
      fixed: "“"
    }, {
      broken: "â€",
      fixed: "”"
    }],
    exampleTexts: [
      "This is – !",
      "This is — !",
      "This is ‘ !",
      "This is ’ !",
      "This is “ !",
      "This is – !"
    ]
  },
  methods: {
    replaceEncodingErrorCharsInString: function(text){
        for(let i=0; i < this.encodingReplacement.length; i++) {
        // string contains "broken" chars
        if(text.includes(this.encodingReplacement[i].broken)) {
            return text.replace(this.encodingReplacement[i].broken, this.encodingReplacement[i].fixed)
        }
      }
      // string is fine, just return it
        return text
    }
  }
})