学习underscore的字符实体与escape函数

2019-10-09

摘要：学习冴羽的博客研究 underscore 中 escape 函数

escape

escape 函数，用于转义 HTML 字符串，替换 &, <, >, “, ‘, 和 ` 字符为字符实体，转义 HTML 可以防止一些别有用心的人获取用户信息。unescape 函数则将字符实体替换为对应字符

字符实体

在 HTML 中某些字符是预留的，如果要正确的显示预留字符，需要将 HTML 中的预留字符替换成对应的字符实体
字符实体有两种形式:

1 2	&entity_name; // 实体名称 &#entity_number; // 实体编号

字符实体分三部分：第一部分是一个 & 符号；第二部分是实体名字或者是 # 加上实体编号；第三部分是一个分号。实体名称便于记忆，但是浏览器对实体编号的支持更好。实体编号就是字符的 unicode 值，以&#开头的十进制编号或者以&#x开头的十六进制编号。比如：

1
2
3

var num = '<'.charCodeAt(0); // 60
num.toString(10) // '60'
num.toString(16) // '3c'

常见字符实体：

& --> &amp;
< --> &lt;
> --> &gt;
" --> &quot;
' --> &#x27;
` --> &#60;

有的浏览器并不能很好的支持单引号和反引号的实体名称，因而使用实体编号

实现 escape、unescape

var _ = {};
var escapeMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#x27;',
  '`': '&#x60;'
};
_.escape = function(string) {
  var escaper = function(match) {
    return escapeMap[match];
  };
  // 使用非捕获性分组构建正则表达式
  var source = '(?:' + Object.keys(escapeMap).join('|') + ')'; // (?:&|<|>|"|'|`)
  var testRegexp = RegExp(source);
  var replaceRegexp = RegExp(source, 'g');
  string = string == null ? '' : '' + string;
  return testRegexp.test(string) ? string.replace(replaceRegexp, escaper) : string;
}

// 类似的
var unescapeMap = {
  '&amp;': '&',
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&#x27;': "'",
  '&#x60;': '`'
};
_.unescape = function(string) {
  var escaper = function(match) {
    return unescapeMap[match];
  };
  var source = '(?:' + Object.keys(unescapeMap).join('|') + ')';
  var testRegexp = RegExp(source);
  var replaceRegexp = RegExp(source, 'g');
  string = string == null ? '' : '' + string;
  return testRegexp.test(string) ? string.replace(replaceRegexp, escaper) : string;
}

可以看到两个方法十分相似，只是构建正则的对象有些区别。相关的可以参考《JS正则迷你书（1.1版）》笔记中第五个案例

抽象

var _ = {};

/**
 * 返回一个object副本，使其键（keys）和值（values）对换。
 * _.invert({a: "b"});
 * => {b: "a"};
 */
_.invert = function(obj) {
  var result = {};
  var keys = Object.keys(obj);
  for (var i = 0, length = keys.length; i < length; i++) { // 遍历对调键和值
    result[obj[keys[i]]] = keys[i];
  }
  return result;
};

var escapeMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#x27;',
  '`': '&#x60;'
};
var unescapeMap = _.invert(escapeMap);

var createEscaper = function(map) {
  var escaper = function(match) {
    return map[match];
  };
  var source = '(?:' + _.keys(map).join('|') + ')';
  var testRegexp = RegExp(source);
  var replaceRegexp = RegExp(source, 'g');
  return function(string) {
    string = string == null ? '' : '' + string;
    return testRegexp.test(string) ? string.replace(replaceRegexp, escaper) : string;
  };
};

_.escape = createEscaper(escapeMap);
_.unescape = createEscaper(unescapeMap);