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

需求描述

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

最终实现效果

先看一下富文本的源码

<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("");
            }