大家好，今天給各位分享正則表達式編輯器的一些知識，其中也會對.*?進行解釋，文章篇幅可能偏長，如果能碰巧解決你現在面臨的問題，別忘了關注本站，現在就馬上開始吧！
正則表達式如何匹配空值
正則表達式匹配空值方式如下：
\b匹配單詞開頭或結尾位置
^匹配字符串開端位置
$匹配字符串結尾位置
\s匹配一切空白字符
\n匹配換行
正則表達式，又稱正規表示法、常規表示法（英語：RegularExpression，在代碼中常簡寫為regex、regexp或RE），計算機科學的一個概念。正則表達式使用單個字符串來描述、匹配一系列符合某個句法規則的字符串。在很多文本編輯器里，正則表達式通常被用來檢索、替換那些符合某個模式的文本。
vu編輯器的使用技巧
有時候我們會遇到這樣的場景，一個組件中有幾個圖表，在瀏覽器resize的時候我們希望圖表也進行resize，因此我們會在父容器組件中寫：
mounted(){
setTimeout(()=>window.onresize=()=>{
this.$refs.chart1.chartWrapperDom.resize()
this.$refs.chart2.chartWrapperDom.resize()
//
},200)
destroyed(){window.onresize=null}
這樣子圖表組件如果跟父容器組件不在一個頁面，子組件的狀態就被放到父組件進行管理，為了維護方便，我們自然希望子組件的事件和狀態由自己來維護，這樣在添加刪除組件的時候就不需要去父組件挨個修改
1.2優化
這里使用了lodash的節流throttle函數，也可以自己實現，這篇文章也有節流的實現可以參考一下。以Echarts為例，在每個圖表組件中：
computed:{
/**
*圖表DOM
*/
chartWrapperDom(){
constdom=document.getElementById('consume-analy-chart-wrapper')
returndom&&Echarts.init(dom)
},//
/**
*圖表resize節流，這里使用了lodash，也可以自己使用setTimout實現節流
*/
chartResize(){
return_.throttle(()=>this.chartWrapperDom&&this.chartWrapperDom.resize(),400)
}
},
mounted(){
window.addeventListener('resize',this.chartResize)
},
destroyed(){
window.removeEventListener('resize',this.chartResize)
}
2.全局過濾器注冊
2.1一般情況
官方注冊過濾器的方式：
exportdefault{
data(){return{}},
filters:{
orderBy(){
//doSomething
},
uppercase(){
//doSomething
}
}
}
但是我們做項目來說，大部分的過濾器是要全局使用的，不會每每用到就在組件里面去寫，抽成全局的會更好些。官方注冊全局的方式：
//注冊
Vue.filter('my-filter',function(value){
//返回處理后的值
})
//getter，返回已注冊的過濾器
varmyFilter=Vue.filter('my-filter')
但是分散寫的話不美觀，因此可以抽出成單獨文件。
2.2優化
我們可以抽出到獨立文件，然后使用Object.keys在main.js入口統一注冊/src/common/filters.js
letdateServer=value=>value.replace(/(\d{4})(\d{2})(\d{2})/g,'$1-$2-$3')
export{dateServer}
/src/main.js
import*ascustomfrom'./common/filters/custom'
Object.keys(custom).forEach(key=>Vue.filter(key,custom[key]))
然后在其他的.vue文件中就可愉快地使用這些我們定義好的全局過濾器了
<template>
<sectionclass="content">
<p>{{time|dateServer}}</p><!--2016-01-01-->
</section>
</template>
<script>
exportdefault{
data(){
return{
time:20160101
}
}
}
</script>
3.全局組件注冊
3.1一般情況
需要使用組件的場景：
<template>
<Baseinputv-model="searchText"@keydown.enter="search"/>
<BaseButton@click="search">
<BaseIconname="search"/>
</BaseButton>
</template>
<script>
importBaseButtonfrom'./baseButton'
importBaseIconfrom'./baseIcon'
importBaseInputfrom'./baseInput'
exportdefault{
components:{BaseButton,BaseIcon,BaseInput}
}
</script>
我們寫了一堆基礎UI組件，然后每次我們需要使用這些組件的時候，都得先import，然后聲明components，很繁瑣，這里可以使用統一注冊的形式
3.2優化
我們需要借助一下神器webpack，使用require.context()方法來創建自己的模塊上下文，從而實現自動動態require組件。這個方法需要3個參數：要搜索的文件夾目錄、是否還應該搜索它的子目錄、以及一個匹配文件的正則表達式。我們在components文件夾添加一個叫componentRegister.js的文件，在這個文件里借助webpack動態將需要的基礎組件統統打包進來。
/src/components/componentRegister.js
importVuefrom'vue'
/**
*首字母大寫
*@paramstr字符串
*@exampleheheHaha
*@return{string}HeheHaha
*/
functioncapitalizeFirstLetter(str){
returnstr.charAt(0).toUpperCase()+str.slice(1)
}
/**
*對符合'xx/xx.vue'組件格式的組件取組件名
*@paramstrfileName
*@exampleabc/bcd/def/basicTable.vue
*@return{string}BasicTable
*/
functionvalidateFileName(str){
return/^\S+\.vue$/.test(str)&&
str.replace(/^\S+\/(\w+)\.vue$/,(rs,$1)=>capitalizeFirstLetter($1))
}
constrequireComponent=require.context('./',true,/\.vue$/)
//找到組件文件夾下以.vue命名的文件，如果文件名為index，那么取組件中的name作為注冊的組件名
requireComponent.keys().forEach(filePath=>{
constcomponentConfig=requireComponent(filePath)
constfileName=validateFileName(filePath)
constcomponentName=fileName.toLowerCase()==='index'
?capitalizeFirstLetter(componentConfig.default.name)
:fileName
Vue.component(componentName,componentConfig.default||componentConfig)
})
這里文件夾結構：
components
│componentRegister.js
├─BasicTable
│BasicTable.vue
├─MultiCondition
│index.vue
這里對組件名做了判斷，如果是index的話就取組件中的name屬性處理后作為注冊組件名，所以最后注冊的組件為：multi-condition、basic-table最后我們在main.js中import'
components/componentRegister.js'，然后我們就可以隨時隨地使用這些基礎組件，無需手動引入了~
4.不同路由的組件復用
4.1場景還原
當某個場景中vue-router從/post-page/a，跳轉到/post-page/b。然后我們驚人的發現，頁面跳轉后數據竟然沒更新？！原因是vue-router"智能地"發現這是同一個組件，然后它就決定要復用這個組件，所以你在created函數里寫的方法壓根就沒執行。通常的解決方案是監聽$route的變化來初始化數據，如下：
data(){
return{
loading:false,
error:null,
post:null
}
},
watch:{
'$route':{//使用watch來監控是否是同一個路由
handler:'resetData',
immediate:true
}
},
methods:{
resetData(){
this.loading=false
this.error=null
this.post=null
this.getPost(this.$route.params.id)
},
getPost(id){}//
}//
4.2優化
那要怎么樣才能實現這樣的效果呢，答案是給router-view添加一個不同的key，這樣即使是公用組件，只要url變化了，就一定會重新創建這個組件。
<router-view:key="$route.fullpath"></router-view>
還可以在其后加++newDate()時間戳，保證獨一無二
5.高階組件
5.1一般情況
//父組件
<BaseInput:value="value"
label="密碼"
placeholder="請填寫密碼"
@input="handleInput"
@focus="handleFocus">
</BaseInput>
//子組件
<template>
<label>
{{label}}
<input:value="value"
:placeholder="placeholder"
@focus="$emit('focus',$event)"
@input="$emit('input',$event.target.value)">
</label>
</template>
5.2優化
1每一個從父組件傳到子組件的props,我們都得在子組件的Props中顯式的聲明才能使用。這樣一來，我們的子組件每次都需要申明一大堆props,而類似placeholer這種dom原生的property我們其實完全可以使用$attrs直接從父傳到子，無需聲明。方法如下：
<input:value="value"
v-bind="$attrs"
@input="$emit('input',$event.target.value)">
attrs"傳入內部組件——在創建更高層次的組件時非常有用。
2注意到子組件的@focus="
event)"其實什么都沒做，只是把event傳回給父組件而已，那其實和上面類似，完全沒必要顯式地申明：
<input:value="value"
v-bind="$attrs"
v-on="listeners"/>
computed:{
listeners(){
return{
...this.$listeners,
input:event=>
this.$emit('input',event.target.value)
}
}
}
listeners"傳入內部組件——在創建更高層次的組件時非常有用。
需要注意的是，由于我們input并不是BaseInput這個組件的根節點，而默認情況下父作用域的不被認作props的特性綁定將會“回退”且作為普通的HTML特性應用在子組件的根元素上。所以我們需要設置inheritAttrs:false，這些默認行為將會被去掉，以上兩點的優化才能成功。
6.路由根據開發狀態懶加載
6.1一般情況
一般我們在路由中加載組件的時候：
importloginfrom'@/views/login.vue'
exportdefaultnewRouter({
routes:[{path:'/login',name:'登陸',component:Login}]
})
當你需要懶加載lazy-loading的時候，需要一個個把routes的component改為()=>import('@/views/login.vue')，甚為麻煩。
當你的項目頁面越來越多之后，在開發環境之中使用lazy-loading會變得不太合適，每次更改代碼觸發熱更新都會變得非常的慢。所以建議只在生成環境之中使用路由懶加載功能。
6.2優化
根據Vue的異步組件和Webpack的代碼分割功能可以輕松實現組件的懶加載，如：
constFoo=()=>import('./Foo.vue')
在區分開發環境與生產環境時，可以在路由文件夾下分別新建兩個文件：
_import_production.js
module.exports=file=>()=>import('@/views/'+file+'.vue')
_import_development.js，這種寫法vue-loader版本至少v13.0.0以上
module.exports=file=>require('@/views/'+file+'.vue').default
而在設置路由的router/index.js文件中：
const_import=require('./_import_'+process.env.NODE_ENV)
exportdefaultnewRouter({
routes:[{path:'/login',name:'登陸',component:_import('login/index')}]
})
這樣組件在開發環境下就是非懶加載，生產環境下就是懶加載的了
7vue-loader小技巧
vue-loader是處理*.vue文件的webpackloader。它本身提供了豐富的API，有些API很實用但很少被人熟知。例如接下來要介紹的preserveWhitespace和transformToRequire
7.1用preserveWhitespace減少文件體積
有些時候我們在寫模板時不想讓元素和元素之間有空格，可能會寫成這樣：
<ul>
<li>1111</li><li>2222</li><li>333</li>
</ul>
當然還有其他方式，比如設置字體的font-size:0，然后給需要的內容單獨設置字體大小，目的是為了去掉元素間的空格。其實我們完全可以通過配置vue-loader實現這一需求。
{
vue:{
preserveWhitespace:false
}
}
它的作用是阻止元素間生成空白內容，在Vue模板編譯后使用_v("")表示。如果項目中模板內容多的話，它們還是會占用一些文件體積的。例如Element配置該屬性后，未壓縮情況下文件體積減少了近30Kb。
7.2使用transformToRequire再也不用把圖片寫成變量了
以前在寫Vue的時候經常會寫到這樣的代碼：把圖片提前require傳給一個變量再傳給組件。
<template>
<div>
<avatar:default-src="DEFAULT_AVATAR"></avatar>
</div>
</template>
<script>
exportdefault{
created(){
this.DEFAULT_AVATAR=require('./assets/default-avatar.png')
}
}
</script>
其實通過配置transformToRequire后，就可以直接配置，這樣vue-loader會把對應的屬性自動require之后傳給組件
{
vue:{
transformToRequire:{
avatar:['default-src']
}
}
}
于是我們代碼就可以簡化不少
<template>
<div>
<avatardefault-src="./assets/default-avatar.png"></avatar>
</div>
</template>
在vue-cli的webpack模板下，默認配置是：
transformToRequire:{
video:['src','poster'],
source:'src',
img:'src',
image:'xlink:href'
}
可以舉一反三進行一下類似的配置
vue-loader還有很多實用的API例如最近加入的自定義塊，感興趣的各位可以去文檔里找找看。
8.render函數
在某些場景下你可能需要render渲染函數帶來的完全編程能力來解決不太容易解決的問題，特別是要動態選擇生成標簽和組件類型的場景。
8.1動態標簽
1.一般情況
比如根據props來生成標簽的場景
<template>
<div>
<divv-if="level===1"><slot></slot></div>
<pv-else-if="level===2"><slot></slot></p>
<h1v-else-if="level===3"><slot></slot></h1>
<h2v-else-if="level===4"><slot></slot></h2>
<strongv-else-if="level===5"><slot></slot></stong>
<textareav-else-if="level===6"><slot></slot></textarea>
</div>
</template>
其中level是data中的變量，可以看到這里有大量重復代碼，如果邏輯復雜點，加上一些綁定和判斷就更復雜了，這里可以利用render函數來對要生成的標簽加以判斷。
2.優化
使用render方法根據參數來生成對應標簽可以避免上面的情況。
<template>
<div>
<child:level="level">Helloworld!</child>
</div>
</template>
<scripttype='text/javascript'>
importVuefrom'vue'
Vue.component('child',{
render(h){
consttag=['div','p','strong','h1','h2','textarea'][this.level]
returnh(tag,this.$slots.default)
},
props:{
level:{type:Number,required:true}
}
})
exportdefault{
name:'hehe',
data(){return{level:3}}
}
</script>
8.2動態組件
當然render函數還有很多用法，比如要使用動態組件，除了使用:is之外也可以使用render函數
<template>
<div>
<button@click='level=0'>嘻嘻</button>
<button@click='level=1'>哈哈</button>
<hr>
<child:level="level"></child>
</div>
</template>
<scripttype='text/javascript'>
importVuefrom'vue'
importXixifrom'./Xixi'
importHahafrom'./Haha'
Vue.component('child',{
render(h){
consttag=['xixi','haha'][this.level]
returnh(tag,this.$slots.default)
},
props:{level:{type:Number,required:true}},
components:{Xixi,Haha}
})
exportdefault{
name:'hehe',
data(){return{level:0}}
}
</script>
你是如何學會正則表達式的
如果你不覺得正則表達式很難讀寫的話，要么你是一個天才，要么，你不是地球人。正則表達式的語法很令人頭疼，即使對經常使用它的人來說也是如此，包括我。
因為正則表達式也是我寫Python爬蟲的一大利器。再大再亂的內容，哪怕是大海撈針，只要告訴我這個針的樣子我都能從茫茫大海中撈出來。
至于我是怎么學會的，當然是從一開始的刷題，到后面不斷的實戰練習練習練習！
我要做的就是給你們推薦幾個學習正則表達式的利器和網站，剩下的還是靠你們自己去完成。
第一：如果你還不知道正則表達式是什么，但是卻要使用它的話。從這里可以快速入門。
正則表達式30分鐘入門教程（http://www.cnblogs.com/hustskyking/archive/2013/06/04/RegExp.html）正則表達式進階（http://div.io/topic/764?page=1）第二：正則表達式的相關語法，這是一張正則的語法圖，可用于快速查詢。不用熟記，要用的時候會查看的懂就行了。
第三：當然，用工具寫更快捷。由于正則表達式難于讀寫，容易出錯，所以我們最好一種工具在線對正則表達式進行測試。
1.Regexr
（https://regexr.com/）
2.Regx101
（https://regex101.com/
支持多種語言,prec,php,javascript,python,golang界面美觀大方支持錯誤提示，實時匹配3.Regulex
(https://jex.im/regulex/)
實時根據正則表達式繪圖頁面加載速度快第四：刷題，HackerRank上有一系列正則表達式的題。不用做很多，只要做幾個。做完以后應該就已經掌握正則表達式的用法了。
（https://www.hackerrank.com/domains/regex/re-introduction）
還是我說的，一步一步來，不要想一步登天。程序員本來就是一個需要不斷學習鍛煉的職業，如果對基本概念都沒有了解就開始刷題，寫代碼的的話，只會讓自己的代碼更復雜。怎么才算扎實，比如：從一個很典型的例子，去除字符串首尾的空白，嘗試用5-10種不同的正則去測試，并思考哪些方式的效率最高，為什么？記住每個程序員都是這樣一步步的實現一遍又一遍才能真正掌握正則的，包括那些大牛亦是如此。
學習軟件開發有沒有必要學習正則表達式
學習軟件開發有沒有必要學習正則表達式
對于Java湖綜合其他語言都能通用正則表達式，學起來是非常有必要的。
為什么要學正則表達式：復雜的字符穿搜索、替換的工作，無法用簡單的方式達成
能夠幫助我們進行各種字符串驗證
不止是用于編程語言中：JavaScript、Java、Perl、PHP、C#
也應用在很多的操作系統，比如：Linux、Unix、Mac、Windows
在我們常用的開發工具中，如FiddlerWillow、WebStorm、Vim，正則表達式也能幫助者我們便利的進行Find&Replace的工作。
如何學習正則表達式：首先可以把網上那些快速學會正則表達式的教程快速過一遍，找不到的私信我。因為很多部分的內容都是基礎入門的，講的也也不太多。想要有深度的依舊可以私信我。過一邊就可以直接寫出來一些相關正則表達式的東西了，遇到比較復雜還會有些懵不過沒關系。
下面就是看書，如果可以《IntroducingRegularExpressions》盡量看原版英文，特別是在已經有一些中文教程的基礎之下，看這本書完全可以。前面可能有寫費勁，但是會越看越快的。到了這異步，基本上想要的正則表達式就算入門。覺得夠用可以停在這一步，還想深入的話，繼續看書。
如果沒時間了，我建議就可以停到這里了。找一些教程仔細的看完一套，保證自己可以看懂并且寫一些自己可以完成的。其實正則表達式主要就是匹配字符集，一個匹配次數。
關于正則表達式編輯器的內容到此結束，希望對大家有所幫助。
