获取富文本编辑器中的不含HTML标记的纯文本

layui富⽂本域form表单提交和ajax提交获取编辑器内容详解最近写项⽬中需要⽤到LayUI富⽂本编辑器，提交时发现富⽂本编辑器中内容是空的，查了很多资料才发现，LayUI在渲染富⽂本域时，是在下⾯插⼊的样式代码。

我们页⾯上定义的是⼀个textarea标签，之后⽤JS渲染的。

我们获取的内容是textarea中内容，富⽂本域中的内容和textarea中的内容不是⾃动同步的，所以我们需要在提交前把内容同步⼀下。

form表单提交：⾸先定义⽂本域和提交按钮提交时把富⽂本域中的内容与textarea标签同步⼀下。

ajax提交ajax提交form表单是⼀样的提交部分代码，先绑定按钮，同步⽂本内容，在发送post请求提交：注意：submit(formSubmit)中的formSubmit为提交按钮的lay-filter值。

data.field可以获取到form表单中的数据。

返回false是阻⽌form提交后，在进⾏form表单提交刷新页⾯。

form.on("submit(formSubmit)", function (data) {console.log(data.field);$.post("layEdit/save", data.field, function(result){layer.msg(result.msg,{offset:'rb'});});return false;})上⾯插⼊都是图⽚，下⾯为代码部分：form表单部分代码：<form id="myForm" action="layUITextarea/save" method="post" class="layui-form white-bg radius"><input type="hidden" name="id" id = "id" value="${model.id}"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">标题</label><div class="layui-input-block"><input type="text" class="layui-input" name="title" value="${model.title}"></div></div><div class="layui-inline"><label class="layui-form-label">类型</label><div class="layui-input-block"><input type="text" class="layui-input" name="type" value="${model.type}"></div></div></div><textarea id="lay_edit" lay-verify="content" name = "text">${model.text}</textarea><button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button></form>同步部分代码：e(['layedit', 'form'], function(){var form = layui.form;var layedit = yedit;layedit.set({ //设置图⽚接⼝uploadImage: {url: 'layUITextarea/upload', //接⼝urltype: 'post'}//创建⼀个编辑器var index = layedit.build('lay_edit',{height: 350});//提交时把值同步到⽂本域中form.verify({//content富⽂本域中的lay-verify值content: function(value) {return layedit.sync(index);}});//提交form.on("submit(formSubmit)", function (data) {console.log(data.field);$.post("layEdit/save", data.field, function(result){layer.msg(result.msg,{offset:'rb'});});return false;})});----------------------------------------------------------------------⾃⼰项⽬--------------------------------------------------------------<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label" style="padding: 5px 5px;">所属分类</label><div class="layui-input-block" style="width: 500px;"><select name="interest" lay-filter="aihao"><option value=""></option><option value="0">写作</option><option value="1" selected="">阅读</option><option value="2">游戏</option><option value="3">⾳乐</option><option value="4">旅⾏</option></select></div></div><div class="layui-form-item"><label class="layui-form-label" style="padding: 5px 5px;">标题</label><div class="layui-input-block" style="width: 500px;"><input type="text" name="title" required lay-verify="required" autocomplete="off" placeholder="例如：春季脱单，⼤型相亲活动" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label" style="padding: 5px 5px;">活动图⽚</label><div class="layui-upload"><div class="layui-input-block"><div class="layui-upload-list"><img class="layui-upload-img" id="demo1" src="__STATIC__/images/1.jpg" style="border: 1px solid black;width: 150px;height: 150px;"><input type="hidden" name="background_img" value=""><p id="demoText"></p></div><button type="button" class="layui-btn" id="test1" style="background-color: #53AD3F">上传图⽚</button><br><span style="color: red;">*必填项活动图⽚尺⼨: 1147 * 442</span></div></div></div><div class="layui-form-item" style="height: 30px;"></div><div class="layui-form-item"><label class="layui-form-label" style="padding: 5px 5px;">浏览量</label><div class="layui-input-block" style="width: 500px;"><input type="text" name="address" required lay-verify="required" autocomplete="off" placeholder="例如：武汉市洪⼭区洪⼭体育馆" class="layui-input"> </div></div><div class="layui-form-item"><label class="layui-form-label" style="padding: 5px 5px;">点赞数</label><div class="layui-input-block" style="width: 500px;"><input type="text" name="address" required lay-verify="required" autocomplete="off" placeholder="例如：武汉市洪⼭区洪⼭体育馆" class="layui-input"></div><textarea id="LAY_demo1" lay-verify="content" name="content" style="display: none"></textarea><div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">⽴即提交</button><button type="button" class="layui-btn layui-btn-primary" style="background-color: #EA5514;color: white" onclick="back()">返回</button> </div></div></form><script>e(['upload','form','layedit'], function() {var $ = layui.jquery, upload = layui.upload,layedit = yedit,form = layui.form;layedit.set({ //设置图⽚接⼝uploadImage: {url: "{:url('admin/article/form_img')}", //接⼝urltype: 'post'}},function (res) {console.log(res);});//创建⼀个编辑器var index = layedit.build('LAY_demo1',{height: 350});//提交时把值同步到⽂本域中form.verify({//content富⽂本域中的lay-verify值content: function(value) {return layedit.sync(index);}});//监听提交form.on('submit(demo1)', function(data){console.log(data.field);// $.ajax({// type:'post',// url:"{:url('admin/article/form')}",// data:{data:data.field},// success:function (res) {// console.log(res);// // if (res.status == 200) {// // layer.msg(res.msg,function () {// // window.location.reload();// // });// // } else {// // layer.msg('失败', {icon: 2, time: 1000});// // }// }// });return false;});$('.site-demo-layedit').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});//⾃定义⼯具栏layedit.build('LAY_demo2', {tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right'] ,height: 100})});</script>。

富⽂本编辑器Tinymce的⽰例和配置Demo链接：有时候需要验证tinyMCE编辑器中的内容是否符合规范（不为空），就需要获取⾥⾯的内容。

1、如果当前页⾯只有⼀个编辑器：获取内容：tinyMCE.activeEditor.getContent()设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)2、如果当前页⾯有多个编辑器（下⾯的“[0]”表⽰第⼀个编辑器，以此类推）：获取内容：tinyMCE.editors[0].getContent()设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)3、获取不带HTML标记的纯⽂本内容：var activeEditor = tinymce.activeEditor;var editBody = activeEditor.getBody();activeEditor.selection.select(editBody);var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );Html代码⽰例：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>tinymce 4 editor</title></head><body><script type="text/javascript"src="https:///jquery/3.2.1/jquery.js"></script><script type="text/javascript" src="tinymce.min.js"></script><script type="text/javascript" src="jquery.tinymce.min.js"></script><script type="text/javascript">tinymce.init({selector: "#txt",plugins: ["advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker","searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking","table contextmenu directionality emoticons template textcolor paste fullpage textcolor codesample"],toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",toolbar2: " searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code codesample | inserttime preview | forecolor backcolor",toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", menubar: false,toolbar_items_size: 'small',style_formats: [{title: 'Bold text', inline: 'b'},{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},{title: 'Example 1', inline: 'span', classes: 'example1'},{title: 'Example 2', inline: 'span', classes: 'example2'},{title: 'Table styles'},{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}],templates: [{title: 'Test template 1', content: 'Test 1'},{title: 'Test template 2', content: 'Test 2'}],language:'zh_CN'});</script><form method="post" action="somepage"><textarea name="content" id ="txt"style="width:100%"></textarea></form><button id="btn">提交</button><pre id="xx"></pre></body><script type="text/javascript">$("#btn").click(function(){$("#xx").html(tinyMCE.activeEditor.getContent() );})</script></html>。

js处理富⽂本编辑器转义、去除转义、去除HTML标签富⽂本编辑器⽣成的HTML标签，进⾏转义，然后写⼊数据库，防⽌脚本注⼊：function htmlEncode(value){ return $('<div/>').text(value).html();}从数据库拿出的转义后的HTML标签内容，先得去除转义，然后再去除HTML标签，是⽣成缩略⽂字。

/*移除HTML标签代码*/function removeHTMLTag(str) {str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tagstr = str.replace(/[ | ]*\n/g,'\n'); //去除⾏尾空⽩//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空⾏str=str.replace(/ /ig,'');//去掉return str;}//转意符换成普通字符function escape2Html(str) {var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});}如果是⽂章详情页的话，直接去除转义就可以显⽰在页⾯了：//转意符换成普通字符function escape2Html(str) {var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});}。

Java实现从Html⽂本中提取纯⽂本的⽅法1、应⽤场景：从⼀份html⽂件中或从String（是html内容）中提取纯⽂本，去掉⽹页标签；2、代码⼀：replaceAll搞定//从html中提取纯⽂本public static String StripHT(String strHtml) {String txtcontent = strHtml.replaceAll("</?[^>]+>", ""); //剔出<html>的标签txtcontent = txtcontent.replaceAll("<a>\\s*|\t|\r|\n</a>", "");//去除字符串中的空格,回车,换⾏符,制表符return txtcontent;}3、代码⼆：正则表达式搞定//从html中提取纯⽂本public static String Html2Text(String inputString) {String htmlStr = inputString; // 含html标签的字符串String textStr = "";java.util.regex.Pattern p_script;java.util.regex.Matcher m_script;java.util.regex.Pattern p_style;java.util.regex.Matcher m_style;java.util.regex.Pattern p_html;java.util.regex.Matcher m_html;try {String regEx_script = "<[\\s]*?script[^>]*?>[\\s\\S]*?<[\\s]*?\\/[\\s]*?script[\\s]*?>"; // 定义script的正则表达式{或<script[^>]*?>[\\s\\S]*?<\\/script> String regEx_style = "<[\\s]*?style[^>]*?>[\\s\\S]*?<[\\s]*?\\/[\\s]*?style[\\s]*?>"; // 定义style的正则表达式{或<style[^>]*?>[\\s\\S]*?<\\/style>String regEx_html = "<[^>]+>"; // 定义HTML标签的正则表达式p_script = pile(regEx_script, Pattern.CASE_INSENSITIVE);m_script = p_script.matcher(htmlStr);htmlStr = m_script.replaceAll(""); // 过滤script标签p_style = pile(regEx_style, Pattern.CASE_INSENSITIVE);m_style = p_style.matcher(htmlStr);htmlStr = m_style.replaceAll(""); // 过滤style标签p_html = pile(regEx_html, Pattern.CASE_INSENSITIVE);m_html = p_html.matcher(htmlStr);htmlStr = m_html.replaceAll(""); // 过滤html标签textStr = htmlStr;} catch (Exception e) {System.err.println("Html2Text: " + e.getMessage()); }//剔除空格⾏textStr=textStr.replaceAll("[ ]+", " ");textStr=textStr.replaceAll("(?m)^\\s*$(\\n|\\r\\n)", "");return textStr;// 返回⽂本字符串}4、代码三：HTMLEditorKit.ParserCallback搞定，Java⾃带的类package com.util;import java.io.*;import javax.swing.text.html.*;import javax.swing.text.html.parser.*;public class Html2Text extends HTMLEditorKit.ParserCallback {StringBuffer s;public Html2Text() {}public void parse(Reader in) throws IOException {s = new StringBuffer();ParserDelegator delegator = new ParserDelegator();// the third parameter is TRUE to ignore charset directivedelegator.parse(in, this, Boolean.TRUE);}public void handleText(char[] text, int pos) {s.append(text);}public String getText() {return s.toString();}public static void main (String[] args) {try {// the HTML to convert//Reader in=new StringReader("string");FileReader in = new FileReader("java-new.html");Html2Text parser = new Html2Text();parser.parse(in);in.close();System.out.println(parser.getText());}catch (Exception e) {e.printStackTrace();}}}以上这篇Java实现从Html⽂本中提取纯⽂本的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。