Lodash源码分析-escape.js-CSDN博客

前言

本系列使用 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
复制代码