Android开发之WebView加载HTML源码包含转义字符实现富文本显示的方法

老套路先看效果图：

WebView加载带有转移字符的HTML源码

再看转义后的字符的效果图：

先看WebView加载HTML源码的方法如下：

 webview.loadDataWithBaseURL(null, html源码, "text/html", "utf-8", null);

如上图如果HTML中带有转义字符加载出来就会跟第一张效果图一样，这样需要我们手动转义一下。目前有两种方法

方法一：可将转义字符替换下：(不推荐因为HTML的转义字符太多了)

htmlData = htmlData.replaceAll("&", "");
htmlData = htmlData.replaceAll(""", "\"");
htmlData = htmlData.replaceAll("&lt;", "<");
htmlData = htmlData.replaceAll("&gt;", ">");
htmlData = htmlData.replaceAll("nbsp;", " ");

方法二：(极力推荐)

方法二经本人多次测试如果进行图文混排文字和图片在同一行不换行可能出现图片无法显示出来

  if (!TextUtils.isEmpty(htmlData)) {
                Spanned spanned = null;
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
                    //使用HTML的方法转义，api24以上方法
                    spanned = Html.fromHtml(htmlData, Html.FROM_HTML_MODE_COMPACT);
                } else {
                    //使用HTML的方法转义，api24以下方法
                    spanned = Html.fromHtml(htmlData);
                }
                MCLog.e("打印HTML源码", spanned.toString());
                wvReadMsgContent.loadDataWithBaseURL(null, spanned.toString(), "text/html", "utf-8", null);
                //数据加载后隐藏缩放按钮
                wvReadMsgContent.getSettings().setDisplayZoomControls(false);
            }

如果看着乱我贴下源码：ReadMessageActivity.java

package com.mchsdk.paysdk.activity;

import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.view.View;
import android.view.WindowManager;
import android.webkit.WebView;
import android.widget.ImageView;
import android.widget.TextView;

import com.lidroid.xutils.exception.HttpException;
import com.lidroid.xutils.http.RequestParams;
import com.mchsdk.paysdk.bean.DeleteMsgBean;
import com.mchsdk.paysdk.bean.GotMsgByIdParam;
import com.mchsdk.paysdk.bean.MsgContentBean;
import com.mchsdk.paysdk.callback.YhshNetRequestCallBack;
import com.mchsdk.paysdk.config.MCHConstant;
import com.mchsdk.paysdk.utils.MCLog;
import com.mchsdk.paysdk.utils.TextUtils;
import com.mchsdk.paysdk.utils.YhshNetUtils;
import com.mchsdk.paysdk.utils.YhshUtils;
import com.xigu.gson.Gson;

import org.apache.http.entity.StringEntity;

import java.io.UnsupportedEncodingException;

/**
 * 消息阅读页面
 *
 * @author xiayiye5
 * 2020年6月5日16:49:56
 */
public class ReadMessageActivity extends MCBaseActivity implements View.OnClickListener {

    private TextView tvReadMsgTitle;
    private TextView tvReadMsgTime;
    private WebView wvReadMsgContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN
                | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_UNSPECIFIED);
        setContentView(getLayout("activity_read_message"));
        initView();
        initData();
    }

    private void initView() {
        ImageView ivCloseReadMsg = findViewById(getId("iv_close_read_msg"));
        tvReadMsgTitle = findViewById(getId("tv_read_msg_title"));
        tvReadMsgTime = findViewById(getId("tv_read_msg_time"));
        wvReadMsgContent = findViewById(getId("wv_read_msg_content"));
        //设置网页自适应
        wvReadMsgContent.getSettings().setUseWideViewPort(true);
        wvReadMsgContent.getSettings().setLoadWithOverviewMode(true);
        //设置网页字体大小
//        wvReadMsgContent.getSettings().setTextSize(WebSettings.TextSize.LARGEST);
        wvReadMsgContent.getSettings().setTextZoom(250);
        // 设置可以支持缩放
        wvReadMsgContent.getSettings().setSupportZoom(true);
        // 设置出现缩放工具
        wvReadMsgContent.getSettings().setBuiltInZoomControls(true);
        ivCloseReadMsg.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == getId("iv_close_read_msg")) {
            finish();
        }
    }

    /**
     * 1.调用消息读取成功，2.调用获取消息内容
     */
    private void initData() {
        int msgId = getIntent().getIntExtra("msgId", 0);
        RequestParams params = new RequestParams();
        GotMsgByIdParam gotMsgByIdParam = new GotMsgByIdParam();
        GotMsgByIdParam.BodyBean bodyBean = new GotMsgByIdParam.BodyBean();
        bodyBean.setId(msgId);
        gotMsgByIdParam.setBody(bodyBean);
        GotMsgByIdParam.HeaderBean headerBean = new GotMsgByIdParam.HeaderBean();
        headerBean.setToken(YhshUtils.getInstance().getLoginToken(this));
        gotMsgByIdParam.setHeader(headerBean);
        String json = new Gson().toJson(gotMsgByIdParam);
        MCLog.e("消息内容的参数", json);
        try {
            params.setBodyEntity(new StringEntity(json, "UTF-8"));
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        params.setContentType("application/json");
        YhshNetUtils.getInstance().requestHttpPost(MCHConstant.DDD_URL_PRD + "gfanmsg/read", params, new MessageContentCallBack(1));
        YhshNetUtils.getInstance().requestHttpPost(MCHConstant.DDD_URL_PRD + "gfanmsg/info", params, new MessageContentCallBack(2));
    }

    class MessageContentCallBack implements YhshNetRequestCallBack {
        private int requestType;

        MessageContentCallBack(int requestType) {
            this.requestType = requestType;
        }

        @Override
        public void onSuccess(String responseInfo) {
            if (requestType == 1) {
                MCLog.e("打印已读消息数据", responseInfo + "");
                DeleteMsgBean deleteMsgBean = new Gson().fromJson(responseInfo, DeleteMsgBean.class);
                int result = deleteMsgBean.getResult();
                if (result == 1) {
                    //已阅读
                    MCLog.e("阅读", "阅读成功！");
                }
            } else {
                MsgContentBean msgContentBean = new Gson().fromJson(responseInfo, MsgContentBean.class);
                MCLog.e("打印消息详情数据", responseInfo);
                //设置消息内容
                updateMsgContentData(msgContentBean);
            }
        }

        @Override
        public void onFail(HttpException e, String s) {
            String localizedMessage = e.getLocalizedMessage();
            MCLog.e("打印异常", localizedMessage + ":" + s);
        }
    }

    private void updateMsgContentData(MsgContentBean msgContentBean) {
        MsgContentBean.ResultBean resultContent = msgContentBean.getResult();
        if (resultContent != null) {
            String htmlData = resultContent.getMessage_text();
            tvReadMsgTitle.setText(resultContent.getMessage_title());
            tvReadMsgTime.setText(resultContent.getSend_time());
            if (!TextUtils.isEmpty(htmlData)) {
                Spanned spanned = null;
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
                    //使用HTML的方法转义，api24以上方法
                    spanned = Html.fromHtml(htmlData, Html.FROM_HTML_MODE_COMPACT);
                } else {
                    //使用HTML的方法转义，api24以下方法
                    spanned = Html.fromHtml(htmlData);
                }
                MCLog.e("打印HTML源码", spanned.toString());
//                htmlData = htmlData.replaceAll("&", "");
//                htmlData = htmlData.replaceAll(""", "\"");
//                htmlData = htmlData.replaceAll("&lt;", "<");
//                htmlData = htmlData.replaceAll("&gt;", ">");
//                htmlData = htmlData.replaceAll("nbsp;", " ");
                wvReadMsgContent.loadDataWithBaseURL(null, spanned.toString(), "text/html", "utf-8", null);
                //数据加载后隐藏缩放按钮
                wvReadMsgContent.getSettings().setDisplayZoomControls(false);
            }
        }
    }
}

再看下xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3.7" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:background="@drawable/mch_input_back_shape"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingTop="15dp">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="消息"
                android:textColor="@color/login_text"
                android:textSize="18sp" />

            <ImageView
                android:id="@+id/iv_close_read_msg"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_gravity="right"
                android:layout_marginRight="15dp"
                android:src="@drawable/mch_close1" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_marginTop="5dp"
            android:background="#DEDEDE" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:background="@null"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_read_msg_title"
                android:layout_width="match_parent"
                android:layout_height="22dp"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="15dp"
                android:gravity="center"
                android:singleLine="true"
                android:textColor="@color/login_text"
                android:textSize="15sp"
                tools:text="我是消息标题呀我是消息标题" />

            <TextView
                android:id="@+id/tv_read_msg_time"
                android:layout_width="match_parent"
                android:layout_height="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="10dp"
                android:gravity="center"
                android:textColor="@color/login_text"
                android:textSize="11sp"
                tools:text="2019-05-03   10:59:51" />

            <WebView
                android:id="@+id/wv_read_msg_content"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_marginBottom="17dp"
                android:scrollbars="none" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="4" />
</LinearLayout>

代码中缺少的图片背景颜色请自行补全谢谢