/* @flow */

import { cached } from 'shared/util'
import { parseFilters } from './filter-parser'

//找到{{abc}}这样的
const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g //.+的意义是最小匹配, 找到符合的马上结束

//正则的元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { }
const regexEscapeRE = /[-.*+?^${}()|[\]/\\]/g //这个函数创建用户自定义模板符号, 比如传入 [ "[[", "]]" ], 模板就可以写成 [[abc.reverse()]]
const buildRegex = cached(delimiters => {
const open = delimiters[0].replace(regexEscapeRE, '\\$&') //$&代表这个匹配项, 这里元字符使用\\转义, 保证安全
const close = delimiters[1].replace(regexEscapeRE, '\\$&')
return new RegExp(open + '((?:.|\\n)+?)' + close, 'g') //格式跟 defaultTagRe类似
})

export function parseText (
text: string,
delimiters?: [string, string]
): string | void {
 //拿到最终的模板正则 
const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE
if (!tagRE.test(text)) {
return
}
const tokens = []
let lastIndex = tagRE.lastIndex = 0
let match, index
while ((match = tagRE.exec(text))) {
index = match.index
// push text token
if (index > lastIndex) {
tokens.push(JSON.stringify(text.slice(lastIndex, index)))
}
// tag token
const exp = parseFilters(match[1].trim())
tokens.push(`_s(${exp})`)
lastIndex = index + match[0].length
}
if (lastIndex < text.length) {
tokens.push(JSON.stringify(text.slice(lastIndex)))
}
return tokens.join('+')
}

vue.js 源代码学习笔记 ----- text-parse.js的更多相关文章

  1. vue.js 源代码学习笔记 ----- core scedule.js

    /* @flow */ import type Watcher from './watcher' import config from '../config' import { callHook } ...

  2. vue.js 源代码学习笔记 ----- core array.js

    /* * not type checking this file because flow doesn't play well with * dynamically accessing methods ...

  3. node.js day01学习笔记:认识node.js

    Node.js(JavaScript,everywhere) 1.Node.js 介绍 1.1. 为什么要学习Node.js 企业需求 + 具有服务端开发经验更好 + front-end + back ...

  4. vue.js 源代码学习笔记 ----- html-parse.js

    /** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...

  5. vue.js 源代码学习笔记 ----- 工具方法 lang

    /* @flow */ // Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的 export const emptyObject = Obje ...

  6. vue.js 源代码学习笔记 ----- 工具方法 env

    /* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' // can we use __proto_ ...

  7. vue.js 源代码学习笔记 ----- helpers.js

    /* @flow */ import { parseFilters } from './parser/filter-parser' export function baseWarn (msg: str ...

  8. vue.js 源代码学习笔记 ----- 工具方法 share

    /* @flow */ /** * Convert a value to a string that is actually rendered. { .. } [ .. ] 2 => '' */ ...

  9. vue.js 源代码学习笔记 ----- codegen.js

    /* @flow */ import { genHandlers } from './events' import { baseWarn, pluckModuleFunction } from '.. ...

随机推荐

  1. 多图片生成pdf文件

    这里记录多个图片合并生成一个pdf文件的方法. 首先maven引入所需jar包: <dependency> <groupId>com.itextpdf</groupId& ...

  2. Openstack(十二)部署neuron(计算节点)

    在计算节点安装 12.1安装neuron(计算节点) # yum install openstack-neutron-linuxbridge ebtables ipset –y 12.2配置neutr ...

  3. Openstack(五)Memcache- repcached集群

    5.1.1下载Memcache- repcached并解压 # wget http://downloads.sourceforge.net/repcached/memcached-1.2.8-repc ...

  4. And Design:拓荒笔记——Form表单

    And Design:拓荒笔记——Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...

  5. python遗留问题

    def assert_element_in_page_source(s): print type(s) print s #assert s in driver.page_sourcecommand=' ...

  6. myeclipse安装jadclipse(反编译工具)

    我是myeclipse5. 的IDE工具.为了能反编译class文件,上网搜索了很多资料,终于找到一下的一段资料: .将jad.exe 复制到myeclipse安装目录的jre/bin目录下, 如:C ...

  7. Python笔记 #15# Pandas: Missing Data

    10 Minutes to pandas import pandas as pd import numpy as np import matplotlib.pyplot as plt dates = ...

  8. linux下递归删除指定后缀名的文件

    以删除当前目录到所有子目录下的后缀名为rej的文件为例: find . -name "*.rej" |xargs rm -f

  9. C# 版本和.NET 版本以及VS版本的对应关系

    https://en.wikipedia.org/wiki/C_Sharp_(programming_language)#Versions http://stackoverflow.com/quest ...

  10. 强连通分量(Korasaju & Tarjan)学习笔记

    好久以前学过的东西...现在已经全忘了 很多图论问题需要用到强连通分量,还是很有必要重新学一遍的 强连通分量(Strongly Connected Component / SCC) 指在一个有向图中, ...