js提取135编辑器相同的css
135编辑器导入的内容,有重复的很多css,导致加载很慢,只能去掉
function remove135FormatContent(content){
if(!content) return '';
//1.去掉135版本信息
content=removeVersionInfo(content); //2.去掉data-的无用属性
content=removeDataAttr(content); //3.提取公用的style,写入class="",没有公用的还是放在 style
content=extractHTMLByStyleToClass(content);
return content;
} function removeDataAttr(content){
if(!content) return ''; //去掉data-的无用属性
var reg=new RegExp('\\s+data-[\\w-]+\\s*=\\s*\"[\\s\\S]*?\"','g');
var result=content.replace(reg, function($0){
return $0.replace(/^\s+/, '').indexOf('data-type')==0 ? $0 : ' ';
});
//去掉空的属性
result=result.replace(/\s+class=\"\"/g, "");
result=result.replace(/\s+style=\"\"/g, ""); //label="Powered by 135editor.com"
result=result.replace(/\s+label=\"Powered by 135editor.com\"/g,"");
// class="_135editor"
result=result.replace(/\s+class=\"_135editor\"/g,""); //p><br/><br/></p>
result=result.replace(/<p>(<br\s*\/?>)+<\/p>/g,""); result=result.replace(/<style>(<br>)+<\/style>/g,""); //这个权限有点大
result=result.replace(/(<br>)+/g,""); //<p></p>
result=result.replace(/<p><\/p>/g,""); //去掉title中是http的
result=result.replace(/ title\s*=\s*\"https*[\s\S]*?\"/g,"");
return result;
} function extractHTMLByStyleToClass(content){
if(!content) return "";
//1.取出所有style
var reg=new RegExp(' style\\s*=\\s*\"[\\s\\S]*?\"','g');
var allstyles00 = content.match(reg);
var allstyles=[];
//style中包含url(或" 不处理
for(var i in allstyles00){
if(allstyles00[i].indexOf('url(')>=0){
continue;
}
if(allstyles00[i].indexOf('"')>=0){
continue;
}
allstyles.push(allstyles00[i]);
} //2.计算每个style出现的次数
var counts = {};
for(var i in allstyles){
var style = allstyles[i];
if( !counts[style] ) counts[style]=0;
counts[style]++;
} //3.找到已有的zwedsty_的最大序号
var prefix = "zwedsty_";
var allHasPrefix = content.match(new RegExp('\\.'+prefix+'\\d+','g'));
var maxClassNum = 0;
for(var i in allHasPrefix){
var num = allHasPrefix[i].substring(1+prefix.length);
num = parseInt(num,10);
if( maxClassNum < num) maxClassNum = num;
} //3.对于有重复的style,换成class
var classes = [];
for(var style in counts){
if(counts[style]<2)continue; //没有重复,不做处理
if(style.length<=20)continue; //太短的,不做处理
var oneClass = prefix + (++maxClassNum);
//生成一个class
classes.push( "."+ oneClass
//+"{" +replaceStyleQuotToSymble(getMiddleString(style, '"', '"'))
+"{" +getMiddleString(style, '"', '"')
+ "}");
//将style换成class
content = myReplaceByString(content, style,
' class="' + oneClass + '"');
} //将所有的class写到content最前面
//var styleString = "<style>\n" + classes.join("\n") + "</style>\n" ;
var styleString = "<style>" + classes.join("\n") + "</style>" ;
//var styleString = "<style>" + classes.join(" ") + "</style>" ; //有内容再去加
if(classes.length>0){
content = styleString + content;
}
return content;
} function replaceStyleQuotToSymble(str){
if(!str) return str;
return myReplaceByString(str, '"', '"');
}
//去掉135版本信息
function removeVersionInfo(content){
if(! content ) return "";
var idx1 = content.indexOf('<section powered-by="135编辑器"');
if(idx1<0) return content;
var idx2 = content.lastIndexOf('</section>');
if( idx2<0) idx2 = content.length;
return content.substring(0, idx1) + content.substring(idx2+'</section>'.length);
}
//取“”中间的值
function getMiddleString(content, tag1, tag2){
if(!content || !tag1 || !tag2) return "";
var idx1 = content.indexOf(tag1);
if(idx1<0) return "";
idx1 += tag1.length;
var idx2 = content.indexOf(tag2, idx1);
if( idx2<0) return "";
return content.substring(idx1, idx2);
}
//替换函数
function myReplaceByString(content, word, target){
//使用字符串替换全部
if(!content || !word ) return content;
while(content.indexOf(word)>=0){
content = content.replace(word, target);
} return content;
}
js提取135编辑器相同的css的更多相关文章
- 如何在编辑器里添加CSS或JS代码
//编辑器里代码模式下的代码 <scripttype="text/javascript"> //my code.... </script> //编辑器里可视 ...
- Codrops 实验:使用 Vibrant.js 提取图像颜色
Codrops 分享了一个有趣的颜色提取实验.这个想法是创建图像的调色板,既有图像本身的潜移默化的影响,也有一些花哨的颜色延伸.通过使用 Vibrant.js 来提取图像中的颜色,并通过 CSS 过滤 ...
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
- js提取新浪邮箱的信用卡
js提取用户新浪邮箱中的信用卡信息,是js非nodejs. 对比py,之前就做不好,出现了复杂点选验证码.js的开发速度只需要py的三分之一,甚至十分之一. js在客户端执行,py在后端执行,py要实 ...
- JS代码高亮编辑器 ace.js
JS代码高亮编辑器 ace.js 字数254 阅读2 评论0 喜欢0 瞎扯 ace 是 js 实现的代码编辑器 编译打包之后的 ACE 代码 官网,未提供编译好的文件 ACE 拥有的特点 语法高亮超过 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...
- 一款纯HTML+CSS+JS富文本编辑器-handyeditor
官网:http://he.catfish-cms.com/ 修改版本(修改一些BUG和图片上传服务器 点击下载: handyeditor富文本编辑器.zip): 图片上传接口上传类型: Content ...
- Thymeleaf 公共css,js提取及自有css,js导入
https://www.jianshu.com/p/2102fa4772ba
随机推荐
- jmeter压力测试中的疑难杂症
概述 大部分新手在用jmeter做压力测试的时候,对一些性能术语十分模糊,直接导致的后果就是对测试出来的结果数据根本不能理解,更谈不上分析了.今天的文章就着重给大家解释一下压力测试中的一些专有名词 问 ...
- 面试问烂的 MySQL 四种隔离级别,看完吊打面试官!
阅读本文大概需要 5.6 分钟. 来源:网络 什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就是事务具有原子性,一个事务中的一系列的操 ...
- 第08组 Beta冲刺(3/4)
队名 八组评分了吗 组长博客链接(2分) 组员1李昕晖(组长) 过去两天完成了哪些任务 文字/口头描述 了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任务. 重新分配小组及个人任务. ...
- kotlin基础 条件控制 when
When 表达式 when 将它的参数和所有的分支条件顺序比较,直到某个分支满足条件. when 既可以被当做表达式使用也可以被当做语句使用.如果它被当做表达式,符合条件的分支的值就是整个表达式的值, ...
- Linux内核链表复用实现栈
我们当然可以根据栈的特性,向实现链表一样实现栈.但是,如果能够复用已经经过实践证明的可靠数据结构来实现栈,不是可以更加高效吗? so,今天我们就复用Linux内核链表,实现栈这样的数据结构. 要实现的 ...
- Qt组件(例如按钮、树形控件)上响应鼠标右键
ui->textEdit->setContextMenuPolicy(Qt::CustomContextMenu); connect(ui->textEdit,SIGNAL(cust ...
- 关于Spring Cloud的思考和总结
博主开发使用了Spring Cloud,使用过程中的一些学习和经验,体会通过本博文进行记录. 以前的架构,单体应用: 加入ESB,通过总线进行调用: 微服务架构: 区别: SOA架构主要针对企业级,采 ...
- SQL Server 2008 R2 安装 下载
[参考]https://www.aiweibk.com/6697.html winrm 服务未启动,需要先配置.以管理员身份启动 cmd,执行 winrm quickconfig 命令. 微信截图_2 ...
- Multitenancy
Multitenancy https://www.gartner.com/en/information-technology/glossary/multitenancy 公用一套物理环境,划分出不同的 ...
- java https post请求并忽略证书,参数放在body中
1 新建java类,作用是绕过证书用 package cn.smartercampus.core.util; import java.security.cert.CertificateExceptio ...