巧解 JavaScript 中的嵌套替换

news2024/11/19 13:23:25

网友 wys 提问:如何仅使用 JavaScript 支持的正则语法,将

<p>
<table> <p> <p>  </table>
<table> <p> <p>  </table>
<p>

<table>...</table>之间的<p>都替换为<br/>?

思考

该问题的难点之一在于 JavaScript 支持的正则特性实在有限。楼主已经想到了非 JavaScript 的解法,如下:

re=/(?<=<table.*?)(<p>)(?=.*?<\/table>)/gi;
alert (sourcestr.replace(re,"<br>"));

嗯,思路大致是这样。较真起来,即使 JavaScript 支持逆序环视,上面答案并不能够如愿运行。原因是带有量词的逆序环视(即在(?<=)里面使用?, *, +, {}这样的量词)是更高级的的语法,极少有语言能够支持(特例是 .Net)。

但是,像楼主这样的正则问题应该是很普便的一个问题,我们经常需要循环地替换一些内容。该如何解答呢?

思路一

阅读 JavaScript 的文档,我找到了 lastIndex 这样的东东。根据这个东东,我形成了这样的思路:

  • 先按外层循环,找到第一组较大的匹配。正则代码是<table[^>]*>[\s\S]*?<\/table>
  • 定位到这次匹配结束的起始位置,替换掉这一段字串中所有的<p>
  • 循环执行。

我觉得上述思路大致清晰,但是细节太多(每次匹配涉及3个位置点,一个长度),解起来并非从容不迫,最终的代码想必也不会赏心悦目;尤为重要的是,整个思路像是原始的 Crack,而不是高手的 Hack 。而且思路与正则关系不大。我决定换一条路。

思路二

关键是循环和嵌套。还好不是盗梦空间的深层递归。能否将匹配的内容保护起来,替换完之后再放回原位呢?想到这里,就豁然开朗了。

思路:先找到所有的匹配内容,记路在数组 inner 中;同时使用该正则,将原字串split为另一个数组 wrapper;

一个重要的特点是,wrapper 一定比 inner 多一个元素,它一一将 inner 项隔开,并处于最外层。wrapper 和 inner 的关系,就像是一个手掌的5根指头与4个指缝的关系。将中间的元素取出,记下位置,等处理完之后,再将所有的元素粘合在一起。就是这样简单。代码如下(为了让问题更有普使性,我稍改了一下源字串):

<script type="text/javascript">
    var str="<p> <table> <p> ,<p>  </table> <p> <table> <p> <p>  </table> <p> <table> <p> <p>  </table>";

    var patt=/<table[^>]*>[\s\S]*?<\/table>/i;
    var wrapper_result=str.split(patt);
    var inner_result = str.match(/<table[^>]*>[\s\S]*?<\/table>/ig);

    var len=inner_result.length;
    var final=wrapper_result[0];

    for (i=0; i<len; i++)
    {
        tmp=inner_result[i].replace(/<p>/gi,"<br>");
        final+=tmp+wrapper_result[i+1];
    }
    alert(final);
</script>

贴图:

regex loop

更新

果然是能人辈出,评论更精彩!请看评论中的这则代码:

alert(sourcestr.replace(/<table.*?\/table>/ig, function($1){return $1.replace(/<p>/ig,"<br>")}));

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

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

相关文章

C库函数:stdio.h

stdio.h C 标准库 – <stdio.h> | 菜鸟教程 (runoob.com) 下面是头文件 stdio.h 中定义的变量类型&#xff1a; 序号变量 & 描述1size_t 这是无符号整数类型&#xff0c;它是 sizeof 关键字的结果。2FILE 这是一个适合存储文件流信息的对象类型。3fpos_t 这是一个适…

组件的生命周期

一、组件的生命周期 1、组件的生命周期&#xff1a;至一个组件从 创建——>运行——>销毁的过程 2、声明周期函数&#xff1a;由Vue提供的内置函数&#xff0c;伴随组件生命周期按次序自动运行——>钩子函数 3、生命周期的阶段划分 &#xff08;1&#xff09;创建…

什么是链接?(动态链接库和静态链接库的对比)

什么是链接&#xff1f; 首先我们需要知道&#xff0c;一个源文件&#xff08;以.c为例&#xff09;是经过什么最后形成的一个可执行的文件&#xff08;windows下为.exe文件&#xff09;。 一个.c的源文件&#xff0c;要经历 1.预处理&#xff1a;头文件的展开替换 2.编译&…

skywalking解析-如何在idea中调试skywalking agent

当我从github上下载下来skywalking agent的代码后&#xff0c;面临的第一个问题就是如何调试。因为skywalking agent的运行模式与普通程序运行方式不一样&#xff0c;它是通过java agent方式运行的。本文接下来介绍如何在本地调试skywalking agent源码。 目录一、下载源码二、运…

leetcode_栈与队列

栈与队列栈与队列理论基础232.用栈实现队列225.用队列实现栈20.有效的括号1047.删除字符串中的所有相邻重复项150.逆波兰表达式求值239.滑动窗口最大值347.前k个高频元素栈与队列总结栈与队列理论基础 栈与队列理论基础 232.用栈实现队列 力扣题目链接 class MyQueue { pub…

Cadence PCB仿真使用Allegro PCB SI通过导入工艺文件配置层叠结构的方法图文教程

⏪《上一篇》   🏡《总目录》   ⏩《下一篇》 目录 1,概述2,配置方法3,总结1,概述 本文简单介绍使用Allegro PCB SI通过导入工艺文件配置层叠结构的方法。 2,配置方法 第1步:打开待仿真的PCB文件,并确认软件为Allegro PCB SI 如果,打开软件不是Allegro PCB SI则…

【JavaScript】数组常用方法

冲突数组常用方法&#xff1a; 注&#xff1a; 以下方法都会对原数组进行改变&#xff1a; push&#xff1a;向数组后面追加元素&#xff0c;返回值是追加后的数组长度 pop&#xff1a;从数组后面删除元素&#xff0c;返回值是删除的元素内容 unshift:在数组前面添加元素&am…

CMMI之系统设计

系统设计&#xff08;System Design, SD&#xff09;是指设计软件系统的体系结构、用户界面、数据库、模块等&#xff0c;从而在需求与代码之间建立桥梁&#xff0c;指导开发人员去实现能满足用户需求的软件产品。系统设计过程域是SPP模型的重要组成部分。本规范阐述了系统设计…

第一章 Flink简介

Flink 系列教程传送门 第一章 Flink 简介 第二章 Flink 环境部署 第三章 Flink DataStream API 第四章 Flink 窗口和水位线 第五章 Flink Table API&SQL 第六章 新闻热搜实时分析系统 前言 流计算产品实时性有两个非常重要的实时性设计因素&#xff0c;一个是待计算…

文档智能(一):基于OpenCV的文档图像校正

文档智能(一)&#xff1a;基于OpenCV的文档图像校正 发表时间&#xff1a; 2023年1月7日创作地点&#xff1a;湖北省武汉市作者&#xff1a;ixy_com&[Aneerban Chakraborty]封面图片来源&#xff1a;DocTr 本文关键词&#xff1a;文档智能、文档图像校正、OpenCV、形态…

从零实现Dooring低代码印章组件

上一篇文章和大家分享了低代码平台组件间通信方案的几种实现:低代码平台组件间通信方案复盘今天继续和大家分享一下比较有意思的可视化印章组件的实现.你将收获低代码组件的基本设计模式印章组件的设计原理(canvas相关)如何快速将任意组件集成到低代码平台正文低代码组件的基本…

雷鸟X2:开启可量产全彩MicroLED光波导AR眼镜新起点

从最近的AR眼镜新品来看&#xff0c;采用MicroLED光波导方案已经成为了明显的趋势&#xff0c;可见业内对于光学的大方向还是非常统一的。不仅如此&#xff0c;各个厂商都拿出自己最优的方案来进行探索和验证&#xff0c;比如有的看重“极轻”、有的看重“视觉”、有的看重“价…

使用Jenkins一键打包部署 SpringBoot应用

一般而言&#xff0c;一个项目部署的由&#xff1a;拉取代码->构建->测试->打包->部署等过程组成&#xff0c;如果我们经常需要部署项目&#xff0c;特别是在微服务时代&#xff0c;服务特别多的情况下&#xff0c;不停的测试打包部署&#xff0c;那估计得有个人一…

数学:一夜读罢头飞雪

文章目录引子代数&#xff0c;几何与分析数学之美微积分形式的统一之美伽罗华群论的深刻之美几何的形体之美公理与定理集合论的公理欧几里得几何公理算术公理实数系的公理系统数学攀登的路径数学的符号系统希腊字母表物理与数学推荐的数学读物参考链接引子 贺新郎读史 人猿相揖…

【阶段二】Python数据分析数据可视化工具使用05篇:统计直方图、面积图与箱型图

本篇的思维导图: 统计直方图 统计直方图(histogram)形状类似柱形图,却有着与柱形图完全不同的含义。统计直方图涉及统计学的概念,首先要从数据中找出它的最大值和最小值,然后确定一个区间,使其包含全部测量数据,将区间分成若干个小区间,统计测量结果出现在各…

详细讲解Linux PCI驱动框架分析

说明&#xff1a; Kernel版本&#xff1a;4.14 ARM64处理器 使用工具&#xff1a;Source Insight 3.5&#xff0c; Visio 1. 概述 从本文开始&#xff0c;将会针对PCIe专题来展开&#xff0c;涉及的内容包括&#xff1a; PCI/PCIe总线硬件&#xff1b; Linux PCI驱动核心框…

通俗理解Platt scaling/Platt缩放/普拉特缩放

一、引言 最近在读论文的时候接触到Platt scaling&#xff0c;有点不理解这个概念。然后好奇心比较重&#xff0c;就看了一些科普&#xff0c;并追根溯源调查了一下Platt scaling。最终搞懂了这个概念&#xff0c;写个博客记录一下。中文翻译有看到&#xff1a;普拉特缩放&…

通信原理与MATLAB(十一):QAM的调制解调

目录1.QAM的调制原理2.QAM的解调原理3.QAM代码4.结果图5.特点1.QAM的调制原理 QAM调制原理如下图所示&#xff0c;基带码元波形经过串并转换分成I、Q两路&#xff0c;然后再经过电平转换(00转换成-1,01转换成-3,10转换成1,11转换成3)&#xff0c;再与对应的载波相乘&#xff0…

scMDC:针对单细胞多模态数据进行聚类

目录摘要引言背景介绍单细胞数据聚类方法回顾ZINBscMDC摘要 单细胞多模态测序技术的发展是为了在同一细胞中同时分析不同模态的数据&#xff0c;它为在单细胞水平上联合分析多模态数据从而识别不同细胞类型提供了一个独特的机会。正确的聚类结果对于下游复杂生物功能研究至关重…

JavaEE多线程-认识多线程

目录一、认识操作系统二、认识进程三、内存管理四、什么是线程(Thread)&#xff1f;五、为什么要有线程&#xff1f;六、进程和线程的关系一、认识操作系统 我们需要简单了解一下操作系统。 操作系统是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织…