缺陷修改实践——replace函数的运用|思考?

news2024/11/24 20:09:30

目录

    • 介绍
    • 问题出现
    • 问题分析
    • 解决方法
      • 优化
    • 实现
    • 总结

介绍

大家好,我是清风。今天给大家分享一个项目中遇到问题解决问题的案例,编程其实就是一个思考的过程,缺少思考就没有灵魂,遇到问题先静下心去思考,想到方法后再去实践。我们要学会灵活变通去解决问题,掌握方法,这样才能举一反三,临危不乱,遇到所有问题都能很好地去解决。

事情是这样的,做的一个答题小程序,要求在后台编辑题目,编辑题目是用的textarea文本域,即输入的是文本内容,配置之后小程序里查询显示后台配置的题目列表。

在这里插入图片描述

当然在测试时后台去配置文本内容,小程序显示是没有问题的。因为配置的题目是纯文本,小程序里也是直接在text里显示的,没有问题。

后台配置题目

在这里插入图片描述

小程序显示题目
在这里插入图片描述

问题出现

问题往往只有在用的时候才会发现,用户或管理员的各种操作才能显现出各种问题。现在小程序里已经不能正常显示了,有些显示的是html格式富文本格式,有些不显示。显然和需求大相径庭,已经出现问题了。

问题分析

在这里插入图片描述

如上图,在用的时候因为是从word文档里直接复制过去的题目(事先在word里整理好了题目,由于各部门工作对接,先是在word文档进行审核),直接复制会把富文本内容也携带过去,携带过去的当然也有style样式,小程序里不显示的原因是富文本的字体颜色是黑色字体,和小程序面背景都是黑色,导致看不到文字。打开控制台调试,问题确实是这么出现的。

在这里插入图片描述

word文档编辑的题目会出现不同的富文本的样式格式,这都会导致小程序的不正常显示。

在这里插入图片描述

富文本的文字颜色是黑色,这导致的小程序页里题目的不显示。

解决方法

既然后台有可能出现富文本,我们直接把小程序题目的渲染方式换成富文本渲染,这样就算是纯文本也可以显示的。而第二个问题,由于小程序页面背景颜色是黑色,所以题目的字体颜色不能是黑色,我们做一个查找替换,把style样式里的字体样式替换掉就可以了。

优化

样式可能是各种各样的,通过查找style样式里的字体样式考虑的匹配太多了,比如说color属性值可以是rgb形式,也可是rgba形式,也可能是#号颜色值形式,还有可能是英文形式颜色,所以不可取。我们换一种思路,直接把style属性替换掉,即查找到style,换成一个无效的属性名。案例中我们替换成了cc是一个无效的属性,不会触发节点的查找和计算。

replace函数

我们用到replace函数,replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

参数

  1. regexp/substr,必需。规定子字符串或要替换的模式的 RegExp 对象。
  2. replacement,必需。一个字符串值。规定了替换文本或生成替换文本的函数。

请注意,regexp/substr 是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp对象,返回值是一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

实现

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

 that.setData({
          _list: res.data
        })
        let data = that.data._list
        data.forEach((element, index) => {
          var stemContent = '_list[' + index + '].stemContent'
          that.setData({
            [stemContent]: element.stemContent.replace(/style/g, 'c')
          })
          element.choiceTopicVos.forEach((item, i) => {
            var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
            that.setData({
              [listCheck]:  item.optionDes.replace(/style/g, 'c')
             
            })
          })
        })

用到的replace函数,进行了字符串的查找替换,查找到style属性,把它替换到了无效的属性c,没有了样式属性,从而达到了去除内联样式的效果,经过调试,完美解决问题。

在这里插入图片描述

总结

在这里插入图片描述

这是一个小问题,我为什么要拿出来说呢?抛去开发的测试流程不说,我认为它能引发一些思考。写代码的过程必须是一个思考的过程,怎么样更好地去实现效果,怎么样更简单有效地解决问题,怎么样优化,要去考虑一个大的方面。善于发现问题,解决问题,并不是说用了什么高级语言就鄙弃了思考,机器语言是相通的,开发中各种各样地应用才是魅力所在。编程是一门是艺术,最重要的是你怎样去巧妙地运用,就像解一道数学题,精绝巧妙的解法会让人眼前一亮,增色太多。同样都做出来了,但是你做的就显得十分优雅!

方法都是思考出来的,能高效解决问题的方法就是好方法,大家如果还有更好的解决方法欢迎评论区留言

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/28129.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTML小游戏11 —— 横版恐龙大冒险游戏(附完整源码)

💂 网站推荐:【神级源码资源网】【摸鱼小游戏】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计…

U++ 插件学习笔记

Type: Editor:插件只能在编辑器有效 Runtime:代表打包出来也会有插件功能 Developer:开发者模式可以使用插件功能 Program:独立的小程序 ServerOnly:服务端可以使用插件功能 ClientOnly:客户…

三西格玛和六西格玛区别是什么?优思学院用一幅图告诉你

3西格玛和6西格玛的质量水平相距甚远,这个视频中用了三个实例说明了两者在不同行业上的具体绩效表现。优思学院认为,企业只有追求完美,不断改进流程,才能不断超越现状,才可以取得更大的业绩。 西格玛水平代表不同的过程…

朋友电脑密码忘了,我当场拔了她的电源,结果。。。

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 Windows密码忘了怎么办?一、5次shift键弹出粘滞键二、异常断电触发系统的自动修复三、未登录修改系统文件四、登录界面5次shift键…

【云原生 | 45】Docker搭建Registry私有仓库之配置Registry详解

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 🏅阿里云ACE认证高级工程师 🏅阿里云开发者社区专…

连接SQL Server 数据库

目录 一、启动 SQL Server Management Studio 1. 点击 SQL Server Management Studio 菜单进入 2. 选择服务器和身份验证方式 3. 点击连接进入数据库 二、新建数据库 1.数据库的概念 2. 看看当前有哪些数据库 3. 新建数据库 三、新建查询 1. 选中 test 数据库…

编码踩坑——记一次fastjson引发的空指针问题、引用标识$ref

本篇介绍在使用fastjson过程中遇到的一个问题,从而引申出使用fastjson时的注意事项——(1)尽量避免在实体中定义 get 开头的方法;(2)避免较深的实体字段层级;(3)避免实体…

企业信息化改革怎么做?

前几天遇到一位朋友提问,他说他们公司目前需要进行信息化改革,问我有哪些好用的信息化管理系统推荐?并附上了几点要求: 扩展性强(公司管理结构变化很快,套装软件扩展升级太麻烦,并不适合&#…

怎样建立自己网站?【建立网站】

怎样建立自己网站?以前建立网站大部分情况下都是需要懂编程,又或者是懂一点代码然后去找源码模板做二次开发。不过随着技术的发展,建立自己网站的方式也在变多,例如目前比较流行的自助搭建网站。那么怎样建立自己网站呢&#xff1…

全卷积神经网络图像去噪研究-含Matlab代码

⭕⭕ 目 录 ⭕⭕✳️ 一、引言✳️ 二、网络结构✳️ 三、实验结果✳️ 3.1 数据集与网络训练✳️ 3.2 卷积神经网络去噪实验✳️ 3.3 基于BM3D的对比实验✳️ 四、参考文献✳️ 五、Matlab代码获取✳️ 一、引言 图像去噪在底层视觉中的重要性可以从多方面体现出来。首先&…

批量导入Npm包依赖到Nexus私服(批量上传脚本)

背景 批量导入是在以下几点情况下产生的需求: 已有Nexus系统,在测试构建环境中Nexus系统为离线环境不能配置外网代理自动下载项目代码工程所在工作电脑有条件联网现需要将项目代码在测试构建环境中连接Nexus私服进行编译构建 基于上面几点情况&#x…

HTML+CSS美食静态网站设计【海鲜网站】web结课作业的源码 web网页设计实例作业

🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业…

Spring Security(3)

您好,我是湘王,这是我的CSDN博客,欢迎您来,欢迎您再来~ 前面运行写好的代码之所以没有任何显示,是因为还没有对Spring Security进行配置,当然啥也不显示了。这就好比你坐在车上,却不…

智慧灾备解决方案-最新全套文件

智慧灾备解决方案-最新全套文件一、建设背景二、建设思路三、建设方案四、获取 - 智慧灾备全套最新解决方案合集一、建设背景 随着“云物移大智”各种技术的飞速发展,信息系统种类越来越多,数据保护也备受关注,传统数据保护往往仅覆盖数据库…

(CVPR 2019) 3D-SIS: 3D Semantic Instance Segmentation of RGB-D Scans

图 1:3D-SIS对RGB-D扫描数据执行3D实例分割,学习将2D RGB输入特征与3D扫描几何特征联合融合。结合能够在测试时对全3D扫描进行推理的全卷积方法,我们实现了对目标边界框、类标签和实例掩码的准确推理。 Abstract 我们介绍了3D-SIS&#xff0…

编译原理实验--实验三 预测分析法判断算术表达式的正确性--Python实现

目录 一、实验目的和要求 二、实验内容 三、实验环境 四、实验步骤 1、语法分析所依据的文法; 2、给出消除左递归及提取左公因子的LL(1)文法; 3、预测分析表 4、关键代码 五、实验结果与分析 一、实验目的和要求 理解自顶向下语法分析方法&#…

线程是什么?线程的相关概念以及基本的使用方法说明【内附可执行源码注释完整】

文章目录❓线程是什么🚀为什么要在程序中使用线程🍎线程的优点、缺点🎂线程的应用场合🌰线程的基本使用⭐创建线程⭐线程的终止⭐等待指定线程结束⭐线程程序的编译命令🏠线程使用案例❓线程是什么 首先我们要知道进程…

3.1 首页功能的开发-跳转到首页

第三章. 业务功能开发 项目结构如下: 3.1 首页功能的开发 用户访问项目首页,首先进入登录页面。 用户登录流程图: 我们先写跳转到登录界面,在请求准发到index中如下图所示: 由于配置了视图解析器,查看ind…

GaussDB修改表空间占用磁盘使用率阈值

GaussDB数据库表空间占用磁盘使用率达到了你所设定的值后数据库会进入只读模式 执行非只读SQL时报错如下: ERROR: cannot execute %s in a read-only transaction. 或者运行中部分非只读SQL(insert、update、create table as、create index、alter tab…

MCE | 促炎症的 PCD——细胞焦亡

程序性细胞死亡 (Programmed cell death, PCD) 是多细胞生物中,由基因调控的细胞自杀过程,对多细胞生物的发育、体内稳态和完整性至关重要。PCD 的研究涉及多个领域,如免疫、神经系统发育、癌症、感染等。常见的 PCD 有细胞凋亡 (Apoptosis)、…