In my work, I met the need to adapt the rich text content of HMTL in dark mode. The original rich text content is displayed directly on the WebView.

Replace the content color value in HTML.

Solution a:

Use replace directly for string substitution, which is to identify, tag, such as the following code

newText.replace("<p>"."
"
)
Copy the code

Existing problems:

Substitution strings are a big problem if the original label is already colored. So I’m still looking for another solution.

Method 2:

Write an HTML file with a blank page inside assets. Implement createTable in the HTML. The createTable function receives rich text content, loads it into the table tag, and then performs tag identification, add color values, or replace color values in createTable. Tags with or without a dark theme can be concatenated on the Url.

After testing this aspect perfectly solved the problem, subsequent requirements became easy to add and modify. Paste the code below:

<script type="text/javascript">
			var type = getQueryString('type');

			// Get the  tag and change the background
			if (type == 1) {
			    document.body.style.backgroundColor = "#1F1832";
			} else {
			    document.body.style.backgroundColor = "#F7F8F9";
			}

			function createTable(text) {
			        var table = document.getElementById("table");
			    // Get the  tag and change the background
			    table.innerHTML = text
			        // Get the p tag and insert the add content
			        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 = ' ' + list[i].innerHTML;
			            } else {
			                list[i].innerHTML = ' '+ list[i].innerHTML; }}}// Get the video tag and add the poster attribute
			    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>
Copy the code

You can write rich text here kindeditor.net/demo.php

Rich text content:

       <p style="text-align:center;"> this < / 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>
Copy the code

Demo effect:

Demo address: github.com/gukaihong01…