Lodash源码分析-escape.js

前言

本系列使用 lodash 4.17.4版本

此方法没有对其他方法进行引用

正文

源代码

/** Used to map characters to HTML entities. */
const htmlEscapes = {
  '&': '&amp',
  '<': '&lt',
  '>': '&gt',
  '"': '&quot',
  "'": '&#39'
}

/** Used to match HTML entities and HTML characters. */
const reUnescapedHtml = /[&<>"']/g const reHasUnescapedHtml = RegExp(reUnescapedHtml.source) /** * Converts the characters "&", "<", ">", '"', and "'" in `string` to their
 * corresponding HTML entities.
 *
 * **Note:** No other characters are escaped. To escape additional
 * characters use a third-party library like [_he_](https://mths.be/he).
 *
 * Though the ">" character is escaped for symmetry, characters like
 * ">" and "/" don't need escaping in HTML and have no special meaning
 * unless they're part of a tag or unquoted attribute value. See
 * [Mathias Bynens's article](https://mathiasbynens.be/notes/ambiguous-ampersands)
 * (under "semi-related fun fact") for more details.
 *
 * When working with HTML you should always
 * [quote attribute values](http://wonko.com/post/html-escaping) to reduce
 * XSS vectors.
 *
 * @since 0.1.0
 * @category String
 * @param {string} [string=''] The string to escape.
 * @returns {string} Returns the escaped string.
 * @see escapeRegExp, unescape
 * @example
 *
 * escape('fred, barney, & pebbles')
 * // => 'fred, barney, &amp pebbles'
 */
function escape(string) {
  return (string && reHasUnescapedHtml.test(string))
    ? string.replace(reUnescapedHtml, (chr) => htmlEscapes[chr])
    : string
}

export default escape

解析

参数

该方法只接受一个参数，准备被转义html实体的参数。

返回值

该方法返回被转义了实体的字符串。

方法解析

1.该方法会首先定义一个htmlEscapes对象，这个对象就是将被转义的html实体的映射对象。对象的属性是字符，属性值是对应的html实体。

2.该方法会定义一个RegExp类型的对象reUnescapedHtml，并将reUnescapedHtml对象模式匹配所用的文本赋值给另一个RegExp变量reHasUnescapedHtml。

3.接下来是方法的主函数，这里会先判断传入的参数转换为布尔值后是否为假以及若为真后是否可以匹配到欲转义的字符，如果为假或者未匹配到字符则直接将传入的参数原样返回给调用该方法的地方；若为真并且匹配到了字符，就会用到正则的replace方法依照最先定义的htmlEscapes对象中的字符与html实体的对应将传入字符串中对应的字符转义为html实体，之后将转义后的字符串返回给调用该方法的地方。

注： 该方法可被转义的字符为：&、<、>、"和'。

注： 因为只有字符串可以匹配到正则规则中的字符，所以其他类型的值由于不会匹配到字符会被直接返回给方法调用的地方。

示例

escape("<javascript>alert('I love Script!')</javascript>");
--> "&ltjavascript&gtalert(&#39I love Script!&#39)&lt/javascript&gt"
escape(2333);
--> 2333
escape({a: "<javascript>alert('I love Script!')</javascript>", b: "'Javascript is the best!'"});
--> {a: "<javascript>alert('I love Script!')</javascript>", b: "'Javascript is the best!'"}
escape(true);
--> true
escape(null);
--> null
escape(undefined);
--> undefined

总结

某些人会在Web页面里插入恶意的Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的，由于该方法可将字符串中的几个特殊字符转义为html实体，使嵌入的Script代码无法执行，这样可以防止XXS（跨站脚本攻击）。

具体的XSS方面知识这里就不详细讲述了（其实是因为我也知道的不多哈），感兴趣的可以自行搜索了解。

相关链接：

每日源码分析 – lodash(debounce.js和throttle.js)

每日源码分析 – lodash(remove.js)

本文章来源于午安煎饼计划Web组 – 残阳