项目中做网站验证时我用到的正则,感觉不是太规范,所以我还需要规范系统地去学习下正则。
// 所有style标签
styleReg = ()=> {
return /<style(([\s\S])*?)<\/style>/img;
},
// 所有js标签
jsReg = ()=> {
return /<script(([\s\S])*?)<\/script>/img;
},
// 包含type的style标签
styleDetailReg = ()=> {
return /<style\s*(type=('|")text\/css('|"))?\s*>|<\/style>/img;
},
// 不包含src的script标签
jsNoSrcReg = ()=> {
return /<script\s*(type=('|")text\/javascript('|"))?\s*>(.|\n)*?(?=<\/script>)<\/script>/img;
},
// 包含type、不包含src的js标签
jsDetailReg = ()=> {
return /<script\s*(type=('|")text\/javascript('|"))?\s*>|<\/script>/img;
},
// 包含src的js外联标签
jsSrcReg = ()=> {
return /<script\s*(type=('|")text\/javascript('|"))?\s*(src=(([\s\S])*?))>(.|\n)*?(?=<\/script>)<\/script>/img;
},
// link标签
linkReg = ()=> {
return /<link(([\s\S])*?)>/img;
};
/**
* 过滤代码
* @param code 网站代码
*/
let filterCode = (code)=> {
if (!code) {
return {
showCode: '', othersCode: ''
};
}
let showCodeArr = [],// 将展示的代码数组
othersCode = '';
if (editType == 'html') {
othersCode = [code.match(styleReg()), code.match(jsNoSrcReg())].join('');
// 不包含:已过滤网站验证的meta、<style>内联样式、(不含src的)js纯代码
return {
showCode: code.replace(styleReg(), '').replace(jsNoSrcReg(), ''),
othersCode: othersCode
};
}
else if (editType == 'css') {
showCodeArr = code.match(styleReg());
othersCode = code.replace(styleReg(), '');
// 删除所有style标签名
return {
showCode: showCodeArr ? showCodeArr.join('').replace(styleDetailReg(), '') : '',
othersCode: othersCode
};
}
else if (editType == 'javascript') {
showCodeArr = code.match(jsNoSrcReg());
othersCode = code.replace(jsNoSrcReg(), '');
// 删除所有script标签名
return {
showCode: showCodeArr ? showCodeArr.join('').replace(jsDetailReg(), '') : '',
othersCode: othersCode
};
}
};
/**
* 校验保存的代码是否有效(全部符合所选类型)
*
* @param editorCode 代码编辑器中的代码内容
* @return {boolean} false:无效(不符合),true:有效
*/
let isValidCode = (editorCode)=> {
switch (editType) {
case 'javascript':
// js:含src的js外联标签,或含link标签
return !(jsSrcReg().test(editorCode) || linkReg().test(editorCode));
case 'css':
// css:含js标签,或含link标签
return !(jsReg().test(editorCode) || linkReg().test(editorCode));
default:
return true;
}
};
/**
* 确认保存
* @param editorCode 代码编辑器中的代码内容
*/
let saveCodeIng = (editorCode)=> {
// 测试
// 拼接出完整的标签代码
if (editorCode) {
if (editType == 'css') {
editorCode = '<style>' + editorCode.replace(styleDetailReg(), '') + '</style>';
} else if (editType == 'javascript') {
editorCode = '<script>' + editorCode.replace(jsDetailReg(), '') + '</script>';
}
}
if ($scope.posType == 'header') {
let sendData = angular.copy(this.basic_config);
// 更新到头部代码预览框(不包含网站验证的meta标签)
this.basic_config.custom_heardname = editType == 'html' ? (editorCode + othersCode) : (othersCode + editorCode);
// 实际发送的数据(网站验证meta标签+选中类型的代码(代码编辑器里的)+除去选种类型后的代码)
sendData.custom_heardname = (this.siteChcekMetaArr ? this.siteChcekMetaArr.join('') : '') + this.basic_config.custom_heardname;
// 保存
this.$rs.saveSite(sendData);
}
else if ($scope.posType == 'footer') {
this.basic_style.conf.footerCode = editType == 'html' ? editorCode + othersCode : othersCode + editorCode;
this.submitBasicStyle(true);
}
this.SweetAlert.swal({
title: "success",
text: `网站${posType == 'header' ? '头部' : '底部'}代码保存成功!`,
type: "success",
showCancelButton: false,
confirmButtonText: "返回",
closeOnConfirm: true,
allowEnterKey: false
}, (isConfirm)=> {
if (isConfirm) {
editor.destroy();
editor.container.remove();
$scope.closeThisDialog();
}
});
};