uniapp/html修改页面中的内容指定字段样式

原创

已于 2025-01-03 08:26:58 修改 · 337 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2024-11-12 16:58:29 首次发布

1. html页面中的内容替换，或改变某些字的颜色

前端使用innnerHtml显示返回值+innerHtml文字显示两种不同的颜色(两部分显示颜色不一样)。
特别注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
在这里插入图片描述

在这里插入图片描述

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" src="../js/page-str-replace.js"></script>
</body>
</html>

1.3.2. page-str-replace.css

/*搜索布局*/
.base-query-layout {
   
   
    width: 100vw;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    padding: 0.1rem 0.2rem 0.15rem;
    background-color: white;
}

.base-query-input {
   
   
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    height: 0.7rem;
    line-height: 0.7rem;
    flex: 1;
    opacity: 1;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    border: 0.01rem solid #999999;
}

.base-query-input > input {
   
   
    flex: 1;
    font-size: 0.30rem;
    margin: 0;
    padding: 0 0 0 0.1rem;
    color: #333333;
    opacity: 1;
    height: 0.6rem;
    line-height: 0.6rem;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    border: 0.01rem solid #f5f5f5;
}

.base-query-img {
   
   
    overflow: hidden;
    width: 0.7rem;
    height: 0.7rem;
    display: flex;
    border-radius: 0.5rem;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 0;
}

.base-query-img img {
   
   
    height: 60%;
}

.base-query-title {
   
   
    font-size: 0.30rem;
    color: white;
    margin-left: 0.2rem;
    padding: 0.12rem 0.35rem;
    border-radius: 0.3rem;
    background-color: dodgerblue;
}
.base-search-input {
   
   
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.base-search-clear {
   
   
    color: #999;
    font-size: 0.35rem;
    margin-right: 0.2rem;
}
.home-layout {
   
   
    overflow-x: hidden;
}

.home-layout li {
   
   
    overflow-x: hidden;
    background: #fff;
    margin: 0.2rem 0.2rem;
    padding: 0.05rem 0.05rem;
    border: 0.02rem solid #efeff4;
    border-radius: 0.1rem;
    box