1. html页面中的内容替换，或改变某些字的颜色
前端使用innnerHtml显示返回值+innerHtml文字显示两种不同的颜色(两部分显示颜色不一样)
1.1. html字符串改变某些字的颜色
需求:要文本框的字体部分改变颜色、大小、换行等功能。在了解需求后，文本框input发现完全满足不了现需求，于是寻求其它解决方案。
给定字符串
let text = ‘这是一段正常的文字\r\n这是换行(这是提示的红色)\r\n这段文字为可编辑状态’
1.1.1. 初始方案
当发现文本框满足不了需求时，我第一感觉时不想麻烦，虽然把每一段内容拆成单独的input标签也可实现但是工作量太大，太过麻烦。我的思路是利用盒子的属性contenteditable直接将内容丢进div。
llet text = ‘这是一段正常的文字\r\n这是换行(这是提示的红色)\r\n这段文字为可编辑状态’;
let dom = document.getElementById('text');
dom.innerHTML= text;
// 当编辑完成后 在取得div的内容就可以了
let resultText = document.getElementById('text').innerHTML;
console.log(resultText);
但是这样有一点满足不了，text文本中的\r\n识别不了
1.1.2. 最终方案
既然div识别不了\r\n那就换个能识别的标签，完美解决。
et text = '这是一段正常的文字\r\n这是换行(这是提示的红色)\r\n这段文字为可编辑状态';
let dom = document.getElementById('text');
dom.innerHTML= text;
// 当编辑完成后 在取得div的内容就可以了
let resultText = document.getElementById('text').innerHTML;
console.log(resultText);
1.2. html字符串改变某些字的颜色
unction strRelace(){var xsxf = document.getElementById("str_id");xsxf.innerHTML="字段1测试字段2"var str1 = "字段1";var str2 = "字段2";var reg=eval("/"+str1+"/gi");var reg3=eval("/"+str2+"/gi");xsxf.innerHTML = xsxf.innerHTML.replace(reg,"<font color='#FF0000'>字段1</font>");xsxf.innerHTML = xsxf.innerHTML.replace(reg3,"<font color='#00FF00'>字段2</font>");
}
1.3. html列表字符串改变某些字的颜色
1.3.1. page-str-replace.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>搜索查询</title><meta name="viewport"content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT"><script type="text/javascript" src="../static/js/init-rem.js"></script><link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/><script type="text/javascript" src="../static/js/mui.min.js"></script><link rel="stylesheet" type="text/css" href="../static/css/mui-icons-extra.css"/><link rel="stylesheet" type="text/css" href="../static/css/mui.loading.css"/><script type="text/javascript" src="../static/js/mui.loading.js"></script><script type="text/javascript" src="../static/js/my-mui-loading.js"></script><link rel="stylesheet" type="text/css" href="../static/css/mescroll.min.css"/><script type="text/javascript" src="../static/js/mescroll.min.js"></script><link rel="stylesheet" type="text/css" href="../static/css/selectFilter.css"/><script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script><script type="text/javascript" src="../static/js/selectFilter.js"></script><script type="text/javascript" src="../static/helper/net-helper.js"></script><script type="text/javascript" src="../static/helper/init-helper.js"></script><script type="text/javascript" src="../static/constant/sp-constant.js"></script><link rel="stylesheet" type="text/css" href="../static/css/base.css"/><link rel="stylesheet" type="text/css" href="../css/page-str-replace.css"/><script src="../static/js/vconsole.min.js" type="text/javascript"></script><script type="text/javascript">//var vc = new VConsole()</script>
</head>
<body>
<div class="base-body-layout"><div class="base-body-inner-layout"><!--标题区域--><div class="base-title-bar"><span class="base-title-back" onclick="history.go(-1)"><img src="../img/icon/icon_back.png"/></span><h1>搜索查询</h1><span class="base-title-back"></span></div><!--内容区域--><div class="base-mescroll"><div id="str_id">字段1测试字段2</div><!--搜索布局--><div class="base-query-layout"><div class="base-query-input"><span class="base-query-img"><img src="../img/icon/icon-query-gray.png"/></span><input id="query_id" class="base-search-input"type="text" placeholder="请输入搜索内容"/><span id="clear_input_id" class="base-search-clear">×</span></div><span id="query_submit_id" class="base-query-title">搜索</span></div><ul id="list_id" class="list-layout"></ul></div></div>
</div>
<script type="text/javascript"
