Vue 保留富文本中包含指定字符串所在的行

news2024/11/24 15:08:15

需求描述

如下图所示,想保留所有包含『张三』所在的行

最终实现效果

先看一下富文本的源码

<p>任务1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 张三</p>
<p>任务2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 张三</p>
<p>任务3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 李四</p>
<p>任务4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 李四</p>
<p>任务5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 王五</p>
<p>任务6&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 王五</p>
<p style="margin-top: 17px;"><span style="color: #2dc26b;">任务7&nbsp;</span> &nbsp; &nbsp; &nbsp; &nbsp; 张三</p>
<p>&nbsp;</p>

代码:

            keepContent(content, substr) {
                let result = [];
                let newarr = content.split("<p>");
                newarr.forEach(item => {
                    if (item.indexOf("<p ")>= 0) {
                        let arr1 = item.split("<p "); 
                        arr1.forEach(item1 => {
                            if (item1.indexOf(substr)>= 0) {
                                result.push('<p ' + item1);
                            }                           
                        });                        
                    } else {
                        if (item.indexOf(substr)>= 0) {
                            result.push('<p>' + item);
                        }
                    }
                });      
                return result.join("");
            }

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

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

相关文章

「微服务模式」七种微服务反模式

什么是微服务 流行语经常为进化的概念提供背景&#xff0c;并且需要一个良好的“标签”来促进对话。微服务是一个新的“标签”&#xff0c;它定义了我个人一直在发现和使用的领域。文章和会议描述了一些事情&#xff0c;我慢慢意识到&#xff0c;过去几年我一直在发展自己的个人…

JMeter常见配置及常见问题修改

一、设置JMeter默认打开字体 1、进入安装目录&#xff1a;apache-jmeter-x.x.x\bin\ 2、找到 jmeter.properties&#xff0c;打开。 3、搜索“ languageen ”&#xff0c;前面带有“#”号.。 4、去除“#”号&#xff0c;并修改为&#xff1a;languagezh_CN 或 直接新增一行&…

Envoy

一. Envoy ). Envoy Envoy 于 2017 年 9 月作为孵化项目加入 CNCF。从孵化到毕业&#xff0c;Envoy 都是 CNCF 增长最快的项目之一 Envoy 在吞吐量和延迟方面都表现良好。这在大型云原生部署中至关重要 Envoy 是专为大型现代 SOA&#xff08;面向服务架构&#xff09;架构设计…

Java|IDEA 中添加编译参数 --add-exports

方法1 File > Settings > Build, Execution, Deployment > Compiler > Java Compiler > Javac Options > Override compiler parameters per-module 点击&#xff1a; 点击OK 双击Compliation options&#xff0c;输入后回车&#xff1a; 方法2 找到出错…

【S32DS RTD实战】-1.4-基于S32K3创建配置FreeRTOS工程-控制GPIO点亮LED

目录(附DEMO&#xff0c;可下载&#xff0c;讲解过程超详细) 1 下载FREERTOS RTD 1.1 安装FREERTOS RTD 2 确认S32DS已安装的AUTOSAR RTD 3 基于S32K3创建&配置FREERTOS工程 3.1 选择SDKs 3.2 增加FreeRTOS模块 3.3 修改MCU芯片封装 3.4 配置GPIO 3.5 修改HSE CLK…

python如何更改代码背景图片,背景主题(黑色护眼)和各类文本颜色(python进阶必看,爱了爱了)

一、在 PyCharm 中设置图片背景的方法如下&#xff1a; 打开 PyCharm 的设置窗口&#xff0c;在设置窗口中找到 "Appearance & Behavior" -> "Appearance" 选项卡。在 "Appearance" 选项卡中&#xff0c;找到 "Background Image&qu…

HarmonyOs4.0基础

目录 一、HarmonyOs系统定义 1.1系统的技术特性(三大特征) 1.1.1、硬件互助、资源共享 1.1.2、一次开发、多端部署(面向开发者) 1.1.3、统一OS&#xff0c;弹性部署(支持多种API&#xff1a;ArkTs、JS、C/C、Java) 1.2、系统的技术架构 二、Harmony OS项目搭建 2.1、(D…

同步与互斥(二)

一、谁上锁就由谁解锁&#xff1f; 互斥量、互斥锁&#xff0c;本来的概念确实是&#xff1a;谁上锁就得由谁解锁。 但是FreeRTOS并没有实现这点&#xff0c;只是要求程序员按照这样的惯例写代码。 main函数创建了2个任务&#xff1a; 任务1&#xff1…

文件:文本文件和二进制文件 详解

目录 0 引言1 文本文件1.1 是如何存储的&#xff1f;1.2 文件拓展名 2 二进制文件2.1 是如何存储的&#xff1f;2.2 分类2.2.1 图像文件2.2.2 音频文件2.2.3 视频文件2.2.4 可执行文件 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;C专栏&#x…

GD32F4中断向量查询

中断向量表 中断向量对应函数 __Vectors DCD __initial_sp ; Top of StackDCD Reset_Handler ; Reset HandlerDCD NMI_Handler ; NMI HandlerDCD HardFault_Handler ;…

行为型设计模式(三)状态模式 备忘录模式

状态模式 State 1、什么是状态模式 状态模式允许一个对象在其内部状态改变时改变它的行为&#xff0c;对象看起来似乎修改了它的类&#xff0c;将对象的行为包装在不同的状态类中&#xff0c;对象在运行时根据内部状态的改变而改变它的行为。 2、为什么使用状态模式 封装了…

【数字图像处理】实验四 图像分割

一、实验内容&#xff1a; 1&#xff0e; 熟悉和掌握利用Matlab工具进行数字图像的读、写、显示等数字图像处理基本步骤。 2&#xff0e; 熟练掌握各种图像分割的基本原理及方法。 3&#xff0e; 能够从深刻理解图像分割&#xff0c;并能够思考拓展到一定的应用领域。 二、实验…

雷军1992年发表的计算机论文,强啊!

提起雷军&#xff0c;相信大家都非常熟悉了&#xff0c;90年代初毕业于武大计算机系&#xff0c;后来一路创业&#xff0c;现如今在相应领域的成就也有目共睹。 之前咱们这里也分享过雷军早年间写的文字博客&#xff0c;他曾在早期博客中讲述了自己的编程之路&#xff0c;以及当…

机器学习 | 概率图模型

见微知著&#xff0c;睹始知终。 见到细微的苗头就能预知事物的发展方向&#xff0c;能透过微小的现象看到事物的本质&#xff0c;推断结论或者结果。 概率模型为机器学习打开了一扇新的大门&#xff0c;将学习的任务转变为计算变量的概率分布。 实际情况中&#xff0c;各个变量…

一个简单的 HTTP 请求和响应服务——httpbin

拉取镜像 docker pull kennethreitz/httpbin:latest 查看本地是否存在存在镜像 docker images | grep kennethreitz/httpbin:latest 创建 deployment&#xff0c;指定镜像 apiVersion: apps/v1 kind: Deployment metadata:labels:app: httpbinname: mm-httpbinnamespace: mm-…

FPC柔性排线用什么胶水能固定到线路板上?

为了固定FPC柔性排线到线路板上&#xff0c;可以使用特殊用于电子组装的胶水。常用的胶水类型有&#xff1a; 1.氰基丙烯酸酯胶水&#xff08;Cyanoacrylate&#xff09; 被称为“超级胶水”或“快干胶水”。这种胶水对FPC通常有很好的附着力。 2.环氧树脂胶水 环氧树脂胶水…

C++之深拷贝和浅拷贝

目录 浅拷贝 深拷贝 赋值运算符重载的深拷贝 在学习C类和对象时我们学习了浅拷贝&#xff0c;本期我们将再次回顾浅拷贝并为大家讲述深拷贝的概念。 浅拷贝 在学习类和对象时我们学习了拷贝构造函数的概念&#xff0c;而且我们也知道&#xff0c;因为拷贝构造函数属于类的默…

02|用LangChain快速构建基于“易速鲜花”本地知识库的智能问答系统

02&#xff5c;用LangChain快速构建基于“易速鲜花”本地知识库的智能问答系统 项目及实现框架 我们先来整体了解一下这个项目。 项目名称&#xff1a;“易速鲜花”内部员工知识库问答系统。 项目介绍&#xff1a;“易速鲜花”作为一个大型在线鲜花销售平台&#xff0c;有自…

SpringCloudGateway网关处拦截并修改请求

SpringCloudGateway网关处拦截并修改请求 需求背景 老系统没有引入Token的概念&#xff0c;之前的租户Id拼接在请求上&#xff0c;有的是以Get&#xff0c;Param传参形式&#xff1b;有的是以Post&#xff0c;Body传参的。需要在网关层拦截请求并进行请求修改后转发到对应服务。…

软件工程快速复习(期末急救)

每个同学要假想自己是一个项目经理&#xff0c;去完成一个软件项目&#xff0c;比如医院管理系统&#xff0c;自动设备控制系统等&#xff0c;以面向结构的软件工程方法&#xff0c;说出完成项目的步骤&#xff0c;涉及到的具体技术。初步了解面向对象的方法的与面向结构的方法…