-
2020-08-17 17:46:24
富文本信息在html展示不出,需要转码
<script> var HtmlUtil = { /*1.用浏览器内部转换器实现html转码*/ htmlEncode:function (html){ //1.首先动态创建一个容器标签元素,如DIV var temp = document.createElement ("div"); //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(旧版火狐,google支持) (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html); //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了 var output = temp.innerHTML; temp = null; return output; }, /*2.用浏览器内部转换器实现html解码*/ htmlDecode:function (text){ //1.首先动态创建一个容器标签元素,如DIV var temp = document.createElement("div"); //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持) temp.innerHTML = text; //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。 var output = temp.innerText || temp.textContent; temp = null; return output; }, /*3.用正则表达式实现html转码*/ htmlEncodeByRegExp:function (str){ var s = ""; if(str.length == 0) return ""; s = str.replace(/&/g,"&"); s = s.replace(/</g,"<"); s = s.replace(/>/g,">"); s = s.replace(/\s/g," "); s = s.replace(/\'/g,"'"); s = s.replace(/\"/g,"""); return s; }, /*4.用正则表达式实现html解码*/ htmlDecodeByRegExp:function (str){ var s = ""; if(str.length == 0) return ""; s = str.replace(/&/g,"&"); s = s.replace(/</g,"<"); s = s.replace(/>/g,">"); s = s.replace(/ /g," "); s = s.replace(/'/g,"\'"); s = s.replace(/"/g,"\""); return s; } }; // 使用举例 // 用浏览器内部转换器实现html转码 var html = " <div>'我们在哪里'</div> " var enCodehtml = HtmlUtil.htmlEncode(html); console.log(enCodehtml); // <div>'我们在哪里'</div> // 用浏览器内部转换器实现html解码 var decodeHtml = HtmlUtil.htmlDecode(enCodehtml); console.log(decodeHtml); // <div>'我们在哪里'</div> // ———————————————————————————————————————————————————————————————— // 用正则表达式实现html转码 var html2 = "<div> winne'hello'</div>"; var RegExpEnCodehtml = HtmlUtil.htmlEncodeByRegExp(html2) console.log(RegExpEnCodehtml); // <div> winne'hello'</div> // 用正则表达式实现html解码 var RegExpDecodeHtml = HtmlUtil.htmlDecodeByRegExp(RegExpEnCodehtml); console.log(RegExpDecodeHtml); // <div> winne'hello'</div> </script>
参考:https://blog.csdn.net/m0_38134431/article/details/84950653
更多相关内容 -
android textview组件显示富文本信息
2020-12-19 13:15:39android 中textview显示富文本信息具有以下几种方式:1,利用富文本标签,类似于html标签,如,,等,不过不能直接作为textview.setText的参数值,而应该静html.fromHtml方法将这些文本转换为charsequence对象。...android 中textview显示富文本信息具有以下几种方式:
1,利用富文本标签,类似于html标签,如,,
等,不过不能直接作为textview.setText的参数值,而应该静html.fromHtml方法将这些文本转换为charsequence对象。如果想要显示图片的时候,还需要实现imagegetter接口
2,重写ondraw方法
3,利用webview组件显示html页面
4,textview中显示图片还可以使用imagespan对象,该对象用来封装bitmap对象,并通过spannableString对象封装imagespan对象,将其作为settext方法的参数。
方法1的代码如下:
TextView tv = (TextView) this.findViewById(R.id.tv);
String html="我的测试
";
CharSequence charSequence=Html.fromHtml(html,newImageGetter(){
@OverridepublicDrawable getDrawable(String arg0) {
Drawable drawable=MainActivity.this.getResources().getDrawable(R.drawable.ic_launcher);//下面这句话不可缺少
drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());returndrawable;
}},null);
tv.setText(charSequence);
}
其中碰到img标签返回的drawable对象是由接口返回的值来决定,如果得到的是网络上的图像,那么显示的就是网络的图像。
TextView tv = (TextView) this.findViewById(R.id.tv);
String html="我的测试
";
CharSequence charSequence=Html.fromHtml(html,newImageGetter(){
@OverridepublicDrawable getDrawable(String arg0) {
Drawable d= null;try{
InputStream is= new DefaultHttpClient().execute(newHttpGet(arg0)).getEntity().getContent();
Bitmap bm=BitmapFactory.decodeStream(is);
d= newBitmapDrawable(bm);
d.setBounds(0, 0, 200, 300);
}catch(Exception e) {e.printStackTrace();}returnd;
}
},null);
tv.setText(charSequence);
利用这种方法更多的是显示从网络上获取的照片(另外一种更广泛的方法是利用webview);如果需要显示的是本地资源文件的图像资源,更多的利用imagespan。
TextView tv = (TextView) this.findViewById(R.id.tv);
Drawable drawable=getResources().getDrawable(R.drawable.ic_launcher);
drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
ImageSpan span=newImageSpan(drawable);
SpannableString spannableString=new SpannableString("span");
spannableString.setSpan(span,0, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(spannableString);//用超链接标记文本
spannableString.setSpan(new URLSpan("tel:4155551212"), 2, 3,
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
可见利用span对象,除了可以显示图片之外,还可以显示其他丰富的信息。
-
Android SDK支持那些方式显示富文本信息?以及文本插入
2020-12-19 13:15:37Android SDK支持富文本信息方式1.使用TextView 组件可以显示富文本信息,在TextView组件中可以使用富文本标签显示富文本信息,这种标签类似于HTML标签,但比HTML标签简单。支持有限的几种显示富文本的方式。如标签...Android SDK支持富文本信息方式
1.使用TextView 组件可以显示富文本信息,在TextView组件中可以使用富文本标签显示富文本信息,这种标签类似于HTML标签,但比HTML标签简单。支持有限的几种显示富文本的方式。如标签用于设置文字和颜色,用于设置粗体。包含这些标签的文本不能直接作为TextView.setText方法的参数值。而要先使用Html.fromHtml方法将这些文本转化成CharSequence对象,然后再将该对象作为TextView.setText方法的参数值。
>使用WebView组件显示HTML页面。
>继承View类或其子类,并覆盖onDraw方法,在该方法找那个直接绘制富文本或图像。
>上面3种方法都支持图文混排效果。但第一张那个方法在显示图像是(使用
标签)需要实现ImageGetter接口,并通过ImageGetter.getDrawable方法返回封装图像资源的Drawable对象。
>在TextView 组件中显示图像还可以使用ImageSpan对象,ImageSpan 对象用于封装Bitmap 对象,并通过SpannableString对象封装ImageSpan对象,最后将SpanableString对象作为TextView.setText方法参数值将图像显示在TextView组件上。
public class AndrodTActivity extends Activity implements OnClickListener {
TextView tv_;
TextView tv1;
TextView tv2;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tv_ = (TextView) findViewById(R.id.tv_);
tv1 = (TextView) findViewById(R.id.tv1);
tv2 = (TextView) findViewById(R.id.tv2);
// 使用
标签在TextView组建中显示图像
CharSequence charSequence = Html.fromHtml("
",new ImageGetter() {
@Override
public Drawable getDrawable(String source) {
// 装载图像资源
Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
// 设置要显示图像的大小(按原大小显示)
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
return drawable;
}
}, null);
tv_.setText(charSequence);
// 使用标签
CharSequence c = Html.fromHtml("cheyanxu");
tv1.setText(c);
// 使用ImageSpan对象在TextView组建中显示图像
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
// 根据bitmap创建ImageSpan对象
ImageSpan imageSpan = new ImageSpan(bitmap);
// 创建一个SpanableString对象,以便插入用ImageSpan对象封装的图像
SpannableString spannableString = new SpannableString("icon");
// 用ImageSpan对象替换icon
spannableString.setSpan(imageSpan, 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// 将图像显示在TextView组件上
tv2.setText(spannableString);
tv2.append("cheyanxu");
tv2.append(spannableString);
}
@Override
public void onClick(View v) {
}
}
来个具体的回答。 包括文本操作(连接,插入):
EditText mTextInput=(EditText)findViewById(R.id.input);//EditText对象
int index = mTextInput.getSelectionStart();//获取光标所在位置
String text="I want to input str";
(方法1):
Editable edit = mTextInput.getEditableText();//获取EditText的文字
if (index < 0 || index >= edit.length() ){
edit.append(text);
}else{
edit.insert(index,text);//光标所在位置插入文字
-
非负矩阵分解matlab代码-TADW:“具有富文本信息的网络表示学习”(IJCAI'15)的实现
2021-06-12 17:56:54**具有富文本信息的网络表示学习**的实现。 Text Attribtued Deep Walk (TADW) 是一种节点嵌入算法,它学习节点的嵌入并将节点表示与节点属性融合。 该过程将节点放置在一个抽象特征空间中,其中保留了有关固定顺序... -
Ueditor 富文本编辑器及图片转换.zip
2020-08-07 15:32:24项目中使用富文本编辑器编辑更多内容时,图片输出默认情况下为base64编码格式,需转换为需要的网址格式,且上传图片到指定地址等; -
矩阵的表示matlab代码-TADW:IJCAI2015论文“具有富文本信息的网络表示学习”的代码
2021-05-25 20:12:49这是论文“使用富文本信息进行网络表示学习”的实验室代码。 (将出现在IJCAI2015) 该代码需要安装了MATLAB的64位linux计算机。 主程序是TADW.m。 有关参数的更多详细信息,请参见注释。 数据集说明 Cora包含来自7... -
Android 中textview显示富文本信息
2020-12-19 13:15:39如果想在显示的文本中将URL、E-mail、电话等特殊内容高亮显示,并在单击时触发相应的动作(如单击电话会直接在拨号界面显示电话号码),可以设置标签的android:autoLink属性,该属性可设置的属性值如下: none:不...:设置颜色和字体
:设置大号字
:设置小号字
:斜体
:粗体
:等宽字体(Monospace)
:换行(行与行之间没有空行):换行(行与行之间的空行)
:链接地址
:插入图像
这些标签虽然和HTML的标签类似,但并不具备HTML标签的全部功能。如标签只支持color和face两个属性。
在使用这些标签时不能将带这些标签的字符串直接赋值到TextView上,而需要使用Html.frmHtml方法将带标签的字符串转换成CharSequence对象,再赋值给TextView。
如果想在显示的文本中将URL、E-mail、电话等特殊内容高亮显示,并在单击时触发相应的动作(如单击电话会直接在拨号界面显示电话号码),可以设置标签的android:autoLink属性,该属性可设置的属性值如下:
none:不匹配任何链接(默认) web:匹配Web网址 email:匹配E-mail地址
phone:匹配电话号码 map:匹配映射地址 all:匹配所有的链接
下面是示例
publicclassMainextendsActivity {
@Override
publicvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
txtFirst=(TextView)findViewById(R.id.txtFirst);
String html="样式一
";html+=" 样式二 ";
html+=" 样式三
";html+=" 我的博客:http://blog.csdn.net/a_mean ";
CharSequence charSequence=Html.fromHtml(html);
txtFirst.setText(charSequence);
//该语句在设置后必加,不然没有任何效果
txtFirst.setMovementMethod(LinkMovementMethod.getInstance());
}
}
2.为指定文字添加背景
有一个很常用的Span类叫BackgroundColorSpan,该类的功能是设置指定字符串的背景色:
第1步:将字符串转换成SpannableString对象
第2步:确定要设置的子字符串的start和end
第3步:创建BackgroundColorSpan对象
BackgroundColorSpan bgColorSpan=new BackgroundColorSpan(Color.RED);
第4步:使用setSpan方法将指定子字符串转换成BackgroundColorSpan对象
spannableString.setSpan(bgColorSpan,start,end,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
第5步:用SpannableString对象设置TextView控件
textView.setText(spannableString);
textView.setMovementMethod(LinkMovementMethod.getInstance());
示例如下:
public class MainActivity extends Activity {
private TextView textview1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textview1=(TextView) findViewById(R.id.textview1);
String text="heldsafaf";
SpannableString spannableString=new SpannableString(text);
BackgroundColorSpan bgColorSpan=new BackgroundColorSpan(Color.RED);
spannableString.setSpan(bgColorSpan, 0, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textview1.setText(spannableString);
textview1.setMovementMethod(LinkMovementMethod.getInstance());
}
}
3:带边框的TextView
Android SDK本身提供的TextView控件并不支持边框,所以要想实现这一效果的话我们可以自定义一个控件继承TextView并修改它,
当然也可以设置TextView控件的背景图,这个不作演示。
首先定义一个BorderTextView类, extends TextView 。
publicclassBorderTextViewextendsTextView {
publicBorderTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protectedvoidonDraw(Canvas canvas) {
super.onDraw(canvas);
// 实例化一支画笔
Paint paint = newPaint();
// 设置所绘制的边框颜色为黑色
paint.setColor(android.graphics.Color.WHITE);
// 绘制上边框
canvas.drawLine(0,0,this.getWidth() -1,0, paint);
// 绘制左边框
canvas.drawLine(0,0,0,this.getHeight() -1, paint);
// 绘制右边框
canvas.drawLine(this.getWidth() -1,0,this.getWidth() -1,
this.getHeight() -1, paint);
// 绘制上边框
canvas.drawLine(0,this.getHeight() -1,this.getWidth() -1,
this.getHeight() -1, paint);
}
}
然后在xml布局文件中加入这个控件,这里控件的类型要写上全名(packageName+className):
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textColor="#000000" android:layout_margin="20dp"
android:text="BorderTextView"
/>
效果如下:
4.设置行间距
如果在TextView控件中显示了多行文本,会有一个默认的行间距。如果要更改这个默认的行间距的话,我们可以使用下面几种方式:
android:lineSpacingExtra属性设置精确的行间距。
android:lineSpacingMultiplier属性设置默认行间距的倍数。
使用Style资源设置行间距。我们需要先在res\values目录中的文件里定义一个Style:
1.5
下面是示例。
android:orientation="vertical"android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/textView1"android:layout_width="wrap_content"
android:layout_height="wrap_content">
android:lineSpacingMultiplier="1.8"android:id="@+id/textView2"
android:layout_width="wrap_content"android:layout_height="wrap_content">
android:layout_width="wrap_content"android:layout_height="wrap_content">
此外还可以在代码中设置:textView.setLineSpacing(50,1.2f);第一个参数是精确值,后一个是倍数。
以上几种方式,如果同时设置了精锐值和倍数的话,系统会以最大的一个作为行间距的距离。
5.在未显示完的文本后面加上省略号
当文本内容太多时,TextView控件一屏无法完整显示,这样有时候我们就需要在内容中加上省略号。
在TextView标签中加上android:singleLine="true",这样内容只会显示一行,然后再加上android:ellipsize="end",
这样在该行的末尾就会加上省略号了,android:ellipsize这个属性值还可以是start,middle,有兴趣的朋友可以自己试试。
我们还可以在代码中进行设置:textView.setEllipsize(TextUtils.TruncateAt.END);后面跟的是一个枚举类型。
6.走马灯效果
对于长文本的显示,除了用省略号之外我们还可以让它滚动显示,这样的效果也叫走马灯效果。
我们实现这个效果,也要用到上面android:ellipsize的属性,还有android:marqueeRepeatLimit,和android:focusable属性。
android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever"
android:focusable="true" android:focusableInTouchMode="true" android:singleLine="true"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
如果有的朋友实现这个走马灯效果时发现它跑不起来,记得把android:focusableInTouchMode事件也写上就行了。
-
uniapp加载富文本信息的时候在APP端不显示图片
2021-03-02 19:42:10} 最后:就可以显示出来富文本中的图片了 注意:这个是解决了在app端显示的异常,但是这个会造成小程序端异常的问题,然后你就用uniapp端自带的分类插件,根据不同端显示不同内容的插件#if MP。。。。。。。 -
Qt之QLabel(属性 显示图片 显示动图 显示富文本信息 信号)
2019-08-01 16:00:18QLabel可以说是Qt中最常见的控件之一,主要用来显示文本文字、显示图片、显示gif动图、显示富文本信息。本文将从以下几个方面对QLabel进行介绍: [1]显示及获取文本文字 [2]显示图片 [3]显示动图 [4]显示富文本... -
如何从Web应用程序保存富文本并将其显示在富文本框中
2021-02-28 12:41:54几年前我一直在玩这个 - 基本上我在数据库中有文字,我正在标记以强调某些单词 . 我在存储过程中对其进行了标记,然后将其转换为客户端的RTF .我试着研究RTF规范,但... 在您选择的纯文本编辑器中打开该文档(我使... -
使用WPF显示流式富文本
2021-06-20 03:01:48这个想法使事情变得非常复杂,但我的想法是为每个消息创建一个查看器,并且只创建显示当前可见消息所需的尽可能多的查看器。我认为VirtualizingStackPanel控件是一个很好的工具来管理它。我在这里找到了一个描述... -
梅花150富文本框(纯HTML+JS)
2020-04-24 20:43:57网上有很多富文本框,可是看来看去都不适合自己,所以自己做了个富文本框,简单实用!使用说明比较详细,码砖调试花了三天,请大家珍惜梅花的汗水,请保留梅花150版权信息。感谢!ws:150_4566_6310。去掉下划线就... -
uni-app 修改富文本信息中的图片样式
2019-05-05 13:29:46获取到富文本信息: 用正则表达式定位要修改的部分,替换要修改成的文本内容。 var richtext= res.data.data.richtext; const regex = new RegExp('<img', 'gi'); richtext= richtext.replace(regex, `&... -
java 解析富文本处理 img 标签
2020-12-20 20:43:26很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题1)怎样将富文本的图片的 src 获取出来?2)后台上传的时候用的是相对路径,前端显示... -
HTML中使用富文本,后端无法获取到富文本的值,其他输入框的可以怎么才能获取到富文本的值?
2021-07-23 17:13:12富文本的标签 保存方法 后端接受 当我使用这个方法保存时,其他的input的数据可以传入后端list列表中,但是只有富文本的值为null,怎么才能获取到富文本的值? -
富文本信息存储显示?乱码问题
2017-09-15 00:41:31前两天遇到了一个前台富文本保存异常的问题,具体表现为前台编辑好的富文本保存后再次查看会发现每一行的缩进都变成了 ? ,页面显示非常糟糕,寻求解决的办法。 -
前端显示富文本处理
2022-02-16 10:29:31uniapp <view class="detail"> <rich-text :nodes="detail.content"></rich-text> </view> vue <...that.$post(that.$ApiJs.getNewDetail, data, true).then(res =& -
Vue 富文本处理
2021-08-19 11:07:151,文本溢出 :show-overflow-tooltip="true" 效果: 2,去除文本<p>标签 <template slot-scope="scope"> <p v-html='scope.row.bannerIntroduce'></p> </template> -
uni-app展示富文本数据
2022-03-25 17:08:56转换富文本数据再展示 <view class="bzt_news_content" v-html="imgStyle(news.content)"> </view> // js代码 methods:{ imgStyle(val){ if(val!=''&&val!=undefined&&... -
Android富文本展示
2020-08-29 18:24:04项目中,通知公告功能发布的内容即为富文本,在APP端需要有良好的展示效果。本文总结了安卓端常用的富文本展示技术,并给出了具体的实现,希望对读者有所启发。 2. 需求及实现 社区项目中公告内容主要是图文和链接... -
LayEdit(layer 富文本编辑器使用,包含图片的上传)
2017-10-18 14:11:42layer 富文本编辑器layedit与form的使用,包含form提交时获取富文本的内容以及编辑器的图片上传 -
Vue加载显示富文本内容
2021-01-27 10:09:181、安装marked npm install highlight.js --save npm install marked --save 2、引入 import marked from 'marked' import hljs from "highlight.js"; import 'highlight.js/styles/monokai-sublime.css';... -
接口返回富文本格式的数据该怎么办?
2021-06-30 13:09:37 -
富文本
2021-06-27 11:31:34自动布局UI 参考富文本UI 元素和文本网格的文本可以包含多种字体样式和大小。UI 系统和旧版 GUI 系统都支持富文本。Text、GUIStyle、GUIText 和 TextMesh 类都具有 Rich Text 设置,此设置会指示 Unity 在文本中查找... -
富文本内容去标签展示
2018-12-25 10:00:20在利用富文本编辑的时候会同时生成标签,有时我们并不需要这些标签,如何转化呢? 后端java处转换,贴下两行代码: String text = ;//text为从数据库获取的包含标签的文本 content=text.replaceAll("<[.... -
RichTextKit:SkiaSharp的富文本呈现
2021-02-08 23:49:19RichTextKit是用于SkiaSharp的富文本布局,度量和渲染库。 产品特点 富文本格式 支持最常见的字体样式(粗体,斜体,下划线,上标/下标等) 使用HarfBuzzSharp进行文本整形 表情符号和国际字符集的字体回退 双向和... -
富文本编辑控件(RichEditEX)v2.0英文官方安装版
2019-08-06 22:06:30在用户使用计算机时经常要录入文本信息,并且希望能设置多种字体效果,在某些时候可能还要插入图片或表格,但现今只有Word软件能满足这样的功能,但是你不能要求用户只用Word录入信息,或者你想把Word集成到你的应用程序... -
java阿里云oss整合ueditor富文本编辑器编译源码
2018-10-27 16:37:20一、本项目里面的所有阿里云配置均已禁用,因此需要修改阿里云的配置信息 OSSKey.properties 配置文件参数描述 useStatus true/false是否启用云存储, autoCreateBucket true/false是否添加新的存储仓库,默认false ...