获取富文本编辑器中的不含HTML标记的纯文本
博客类型的网站,往往需要使用在线的Rich Text Editor给用户提供发表博客的功能,比如博客园使用的是tinyMCE。但同时也注意到,在每位同学的博客首页都有“博客预览”,这是怎么实现的呢?
预览的功能其实就是一个从富文本提取简单文本的功能,把html的一些标记符(如<b></b>、<p></p>、<span></span>、<div></div>等)去掉。正常有两种方式,一种方式是用正则表达式去除用户传给服务器的带有html标记的富文本,但这种方法因为需要考虑的html元素还是比较多的,也就导致正则表达式较多,而且使用过多的正则表达式会导致效率地下。
是否有其它比较好的方法呢?通过观察,会发现在一个格式复杂网页中,你用鼠标选中某一部分并复制,这时剪切板里的就仅仅是简单的文本,不包含任何的html标记。我们用鼠标选中文本这件事,JavaScript也是可以完成的,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function SelectText(element) { var text = document.getElementById(element); if ($.browser.msie) { var range = document.body.createTextRange(); range.moveToElementText(text); range.select(); //显示已选中的文本 alert(window.getSelection().toString()); } else { var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); //显示已选中的文本 alert(window.getSelection().toString()); } } |
DEMO:
我们再来看看在tinyMCE中应该怎么做。通过查找资料发现,tinyMCE其实已经很好的支持了这个功能,例如你想获取tinyMCE编辑器里前200个字符:
1 2 3 4 5 | var ed = tinymce.activeEditor; var e = ed.getBody(); ed.selection.select(e); var text = ed.selection.getContent( { 'format' : 'text' } ); var first_200 = text.substr(0, 200); |
DEMO:
作者:Create Chen
出处:http://technology.cnblogs.com
说明:文章为作者平时里的思考和练习,可能有不当之处,请博客园的园友们多提宝贵意见。
本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库