巧解 JavaScript 中的嵌套替换(强大正则)
更新时间：2012年09月09日 10:28:43 作者：
如何仅使用JavaScript支持的正则语法，将有嵌套的内容替换
网友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>
贴图：
更新
果然是能人辈出，评论更精彩！请看评论中的这则代码：
PS: 本站刚刚添加了评论中代码的解析，可以贴代码了。格式见评论部分的图例显示。谢谢合作！
复制代码 代码如下:
<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>
贴图：
更新
果然是能人辈出，评论更精彩！请看评论中的这则代码：
复制代码 代码如下:
alert(sourcestr.replace(/<table.*?\/table>/ig, function($1){return $1.replace(/<p>/ig,"<br>")}));
PS: 本站刚刚添加了评论中代码的解析，可以贴代码了。格式见评论部分的图例显示。谢谢合作！
您可能感兴趣的文章:
- JS使用正则表达式实现关键字替换加粗功能示例
- js正则表达式replace替换变量方法
- js正则查找match()与替换replace()用法实例
- js使用正则实现ReplaceAll全部替换的方法
- JS利用正则配合replace替换指定字符
- js 替换功能函数，用正则表达式解决，js的全部替换
- JavaScript replace(rgExp,fn)正则替换的用法
- JS、replace利用正则表达式替换SQL所有参数为指定格式的数据
- javascript replace()正则替换实现代码
- js正则实现的密码框简单制作,还可以替换成自己想用得符号
- javascript用正则表达式把1234567890替换为abcdefghij
- JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
相关文章
正则表达式判断所填入号码的运营商js代码修改版，需要的朋友可以参考下2012-10-10
前几天看了下百度音乐盒的功能，发现有歌词功能，用正则匹配了下，需要的朋友可以参考下。2011-06-06
我们可以使用正则表达式来代表一些我们希望的字符串类型,比如正整数,下面这篇文章主要给大家介绍了关于正则表达式匹配0-10的正整数以及使用细节的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
正则表达式是通过一些特殊字符的排序，用以删除、查找、替换一行或者多行文字字符串的程序，本文给大家介绍shell脚本正则表达式的相关知识，感兴趣的朋友一起看看吧2021-07-07
笔记三则，贴在这里。2010-07-07
这篇文章主要通过举例理解正则表达式，从一个例子深入解析正则表达式的使用方法，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了Python 正则表达式匹配数字及使用正则表达式找出字符串中的纯数字，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
有相当大的一部分程序员他们只考虑如何能尽快把活干完，从来不考虑如何使自己的代码更完美，更高效，这样的程序员永远也达不到一定的高度。当然，在写正则表达式的时候，我们首先要保证准确性，其次才是效率问题。下面是一些提高正则表达式效率的小窍门。2015-09-09
本文给大家简单总结了下正则表达式中实用EXEC获取字符串中汉字的方法，非常简单实用，并附上了基础语法，希望对大家学习正则表达式能够有所帮助2016-06-06
正则表达式(regular expression)描述了一种字符串匹配的模式。本文重点给大家介绍匹配url的正则表达式，感兴趣的朋友一起学习吧2016-11-11
最新评论