Javascript - unicode无法正确显示

Question

每当我运行此代码时，unicode都会转换为问号字符。它应该使用_font中的unicode字符更改“字体”。

#ta是一个文本区域 #changer是<select>，其中的选项是_font

中的名称

  var _font = {
  base:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
  circled_neg:"",
  bold:"",
  bold_franktur:"",
  bold_italic:"",
  bold_script:"",
  outline:"ℂℍℕℙℚℝℤ",
  mono:"",
  sans_serif:"",
  sans_bold:"",
  sans_italic:"",
  sans_bold_italic:"",
  squared:"",
  franktur:"",
  small_caps:"ᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴩqʀꜱᴛᴜᴠᴡxyᴢᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴩQʀꜱᴛᴜᴠᴡxYᴢ",
};
$(function() {
  console.log(_font.franktur);
  var $ta = $("#ta"), $changer = $("#changer"), font = new Font(_font);

  $changer.change(function() {
    var val = $ta.val(), to = $changer.val();
    var str = font.convert(val, to);
    console.log(str);

  });
});
var Font = function(arr) {
  this.fontset = arr;
};
Font.prototype.convert = function(from, to) {
  var fromSet = this.getFont(from);
  var toSet = this.fontset[to];
  console.log(fromSet);
  console.log(toSet);
  var str = "";
  for(var i = 0 ; i < from.length ; i++) {
    var ch = from.charAt(i);
    var j =  fromSet.indexOf(ch);
    console.log(j)
    if(j != -1) {
      ch = toSet.charAt(j);
    }
    console.log(ch);
    str += ch;
  }
  return str;
};
Font.prototype.getFont = function(text) {
  for(var i in this.fontset) {
    if(this.fontset[i].indexOf(text.charAt(0)) != -1) {
      var f = this.fontset[i];
      return f;
    }
  }
  return this.fontset.base;

Answer 1

某些unicode符号存储为多个符号。所以实际上你的套装有不同的长度。请参阅代码段：

＆＃13;

＆＃13;

var _font = {
  base: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
  circled_neg: "",
  bold: "",
  bold_franktur: "",
  bold_italic: "",
  bold_script: "",
  outline: "ℂℍℕℙℚℝℤ",
  mono: "",
  sans_serif: "",
  sans_bold: "",
  sans_italic: "",
  sans_bold_italic: "",
  squared: "",
  franktur: "",
  small_caps: "ᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴩqʀꜱᴛᴜᴠᴡxyᴢᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴩQʀꜱᴛᴜᴠᴡxYᴢ",
};
$(function() {
  console.log(_font.base.length + ' <=> ' + _font.franktur.length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

当你有时toSet.charAt(j);时，它似乎是unicode符号的一半，显示为?。

解决方案是将您的集存储为数组。在下面的代码片段中，我即时转换集合。但最好在_font声明中使用它们。

＆＃13;

＆＃13;

var _font = {
  base: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
  circled_neg: "",
  bold: "",
  bold_franktur: "",
  bold_italic: "",
  bold_script: "",
  outline: "ℂℍℕℙℚℝℤ",
  mono: "",
  sans_serif: "",
  sans_bold: "",
  sans_italic: "",
  sans_bold_italic: "",
  squared: "",
  franktur: "",
  small_caps: "ᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴩqʀꜱᴛᴜᴠᴡxyᴢᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴩQʀꜱᴛᴜᴠᴡxYᴢ",
};
$(function() {
  var $ta = $("#ta"),
    $changer = $("#changer"),
    font = new Font(_font);

  $changer.change(function() {
    var val = $ta.val(),
      to = $changer.val();
    var str = font.convert(val, to);
    console.log(str);

  });
});
var Font = function(arr) {
  this.fontset = arr;
};
Font.prototype.convert = function(from, to) {
  var fromSet = Array.from(this.getFont(from));
  var toSet = Array.from(this.fontset[to]);
  var str = "";
  for (var i of from) {
    var j = fromSet.indexOf(i);
    str += j > -1 ? toSet[j] : i;
  }
  return str;
};
Font.prototype.getFont = function(text) {
  for (var i in this.fontset) {
    if (this.fontset[i].indexOf(text.charAt(0)) != -1) {
      var f = this.fontset[i];
      return f;
    }
  }
  return this.fontset.base;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="ta">Some text for test purpose.</textarea>
<select id="changer">
<option>base</option>
<option>circled_neg</option>
<option>bold</option>
<option>bold_franktur</option>
<option>bold_italic</option>
<option>bold_script</option>
<option>outline</option>
<option>mono</option>
<option>sans_serif</option>
<option>sans_bold</option>
<option>sans_italic</option>
<option>sans_bold_italic</option>
<option>squared</option>
<option>franktur</option>
</select>

＆＃13;

＆＃13;

＆＃13;