Android顯示富文本+夜間深色模式

更新時間：2022年01月12日 10:30:46 作者：讓開，我要吃人了

大家好，本篇文章主要講的是Android顯示富文本+夜間深色模式，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽

前言

在工作中有遇到這樣的需求，需要把hmtl的富文本內容，進行深色模式適配。原先的富文本內容是在直接在webview上進行展示。

解決思路：替換html中的內容色值。

方案一：

直接使用replace進行字符串替換，當時是去判斷、標簽，例如下代碼

newText.replace("<p>", "<p><span style=\"color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);\">")

存在問題：

替換字符串存在很大的問題，如果原本標簽就是已有色值那就會出現(xiàn)問題。所以我這邊還是尋找到另外一種方案。

方法二：

在assets中寫一個空白頁的html文件，html中實現(xiàn)createTable函數(shù)，用于接收富文本內容，加載到table標簽中，然后在createTable中執(zhí)行標簽識別，添加色值或者替換色值的操作。是否是深色主題的標簽可以在Url上拼接獲取。

經過測試該方面完美解決問題，后續(xù)需求變得也方便添加和修改。下面貼上代碼：

<script type="text/javascript">
			var type = getQueryString('type');
 
			//獲取<body>標簽，跟換背景
			if (type == 1) {
			    document.body.style.backgroundColor = "#1F1832";
			} else {
			    document.body.style.backgroundColor = "#F7F8F9";
			}
 
			function createTable(text) {
			        var table = document.getElementById("table");
			    //獲取<body>標簽，跟換背景
			    table.innerHTML = text
			        //獲取p標簽，插入添加內容
			        var list = document.getElementsByTagName("P");
			    for (var i = 0; i < list.length; i++) {
			        var spans = list[i].getElementsByTagName("span");
			        var aTag = list[i].getElementsByTagName("a");
 
			        if (aTag.length > 0) {
			            for (var j = 0; j < aTag.length; j++) {
			                if (aTag[j].style.backgroundColor == "rgb(255, 255, 255)") {
			                    if (type == 1) {
			                        aTag[j].style.backgroundColor = "rgb(31, 24, 50)";
			                    } else {
			                        aTag[j].style.backgroundColor = "rgb(247, 248, 249)";
			                    }
 
			                }
			                if (aTag[j].style.color == "rgb(51, 51, 51)") {
			                    if (type == 1) {
			                        aTag[j].style.color = "rgb(251, 250, 255)";
			                    }
			                }
			            }
			        }
 
			        if (spans.length > 0) {
			            for (var j = 0; j < spans.length; j++) {
			                if (spans[j].style.backgroundColor == "rgb(255, 255, 255)") {
			                    if (type == 1) {
			                        spans[j].style.backgroundColor = "rgb(31, 24, 50)";
			                    } else {
			                        spans[j].style.backgroundColor = "rgb(247, 248, 249)";
			                    }
 
			                }
			                if (spans[j].style.color == "rgb(51, 51, 51)") {
			                    if (type == 1) {
			                        spans[j].style.color = "rgb(251, 250, 255)";
			                    }
			                }
			            }
			        } else {
			            if (type == 1) {
			                list[i].innerHTML = '<span style="color: rgb(251, 250, 255);">' + list[i].innerHTML;
			            } else {
			                list[i].innerHTML = '<span style="color: rgb(31, 24, 50);">' + list[i].innerHTML;
			            }
 
			        }
 
			    }
			    //獲取視頻標簽,添加poster屬性
			    var videos = document.getElementsByTagName("video")
			        for (var i = 0; i < videos.length; i++) {
			            videos[i].setAttribute("poster", videos[i].src + '?x-oss-process=video/snapshot,t_1000,f_jpg')
			        }
 
			}
 
			function getQueryString(name) {
			    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			    var r = window.location.search.substr(1).match(reg);
			    if (r != null) {
			        return unescape(r[2]);
			    }
			    return 0;
			}
 
</script>

可以在這里寫好富文本 kindeditor.net/demo.php

富文本內容：

       <p style="text-align:center;">
            	這
            </p>
            <p style="text-align:center;">
            	里
            </p>
            <p style="text-align:center;">
            	是
            </p>
            <p style="text-align:center;">
            	什
            </p>
            <p style="text-align:center;">
            	么
            </p>
            <p style="text-align:center;">
            	顏
            </p>
            <p style="text-align:center;">
            	色
            </p>
            <p style="text-align:center;">
            	?。?！
            </p>