老客户的一论坛需要把会员发布的手机号、座机号转成可点击拨号的链接，首先我考虑，是要在会员发布提交时进行处理，还是在发布后进行处理。
我选择在发布后进行前台处理。
需要使用JS replace()方法和正则知识
另一篇关于replace方法与正则基础知识的介绍
测试代码实例：
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<div class="mrdede"><p class="comeing">手机号：13388888888.8位的号：99998888。12位数：133888888883</p> <p class="comeing">13位的：1338888888888.3位的号：999</p> <p class="comeing">很多位的：13388888888888888888.6位的号：999999</p> <p class="comeing">7位的号：9999944-59238</p> <p class="comeing">正常的11位手机号：13812345678。 ============================================== 8位座机号：12345678 共11位=3位区号+8位座机号：01012345678。 共12位=3位区号+1位空格+8位座机号：010 12345678。 共11位=3位区号+"-"+8位座机号：010-12345678。 共12位=4位区号+8位座机号：037912345678。 共13位=4位区号+1位空格+8位座机号：0379 12345678。 共13位=4位区号+"-"+8位座机号：0379-12345678。 ============================================== 7位座机号：1234567 共10位=3位区号+7位座机号：0101234567。 共11位=3位区号+1位空格+7位座机号：010 1234567。 共11位=3位区号+"-"+7位座机号：010-1234567。 共11位=4位区号+7位座机号：03791234567。 共12位=4位区号+1位空格+7位座机号：0379 1234567。 共12位=4位区号+"-"+7位座机号：0379-1234567。</p></div> <script type="text/javascript"> var matchS = $('.comeing'); for(var i=0;i<matchS.length;i++){ var matchHtml = matchS.eq(i).html(); //原来的var regexp = new RegExp(/([^0-9])([0-1]{1}[1-9][0-9]{1,2}[^0-9]?[0-9]{7,8}|[1-9]\d{6,7})([^0-9])/g); //原来的se = matchHtml.replace(regexp, '$1<a style="color:#09f;text-decoration:underline;" href="tel:$2">$2</a>$3'); //原来的二var regexp = new RegExp(/([^0-9])([0-1]{1}[1-9][0-9]{1,2})([^0-9]?)([0-9]{7,8}|[1-9]\d{6,7})([^0-9])/g); //原来的二se = matchHtml.replace(regexp, '$1<a style="color:#09f;text-decoration:underline;" href="tel:$2$4">$2$3$4</a>$5'); var regexp = new RegExp(/([^0-9])((([0-1]{1}[1-9]\d{1,2})([^0-9]?))?)(\d{8}|[1-9]{7})([^0-9])/g); se = matchHtml.replace(regexp, '$1<a style="color:#09f;text-decoration:underline;" href="tel:$4$6">$4$5$6</a>$7'); matchS.eq(i).html(se); } </script> |
解释：
因为客户代码中是要对不相连的多个区块中进行处理，所以选择器只能抓取comeing类，这样的话，下面就必须使用for循环，如果可以选择整个区域的话，那选择器就抓取mrdede类，不使用for循环，matchHtml = matchS.eq(i).html()改为matchHtml = matchS.html()即可。
replace方法正则替换
var regexp = new RegExp(/(1)(2)(3)/g);
se = matchHtml.replace(regexp, ‘$3 $1 $2′);
RegExp中的正则表达式，其中在两个正斜杠“/”之间区域，有并列的多个()，
那么这多个()把匹配的内容，从左向右依次为$1 $2 $3 ……
如果：
var regexp = new RegExp(/(123)/g);
se = matchHtml.replace(regexp, ‘$1我被找到了’);
RegExp中的正则表达式，其中在两个正斜杠“/”之间区域，只有一个()或没有()，
那么只有$1可以参与替换，
替换时不是一定要使用$1 $2 $3 …… 进行替换，也可以使用其它字符进行替换。
关于实例中正则的解释（从左向右依次解释）：
全部原始正则表达式([^0-9])([0-1]{1}[1-9][0-9]{1,2}[^0-9]?[0-9]{7,8}|[1-9]\d{6,7})([^0-9])
([^0-9])以非数字开头（即$1）
原始中的第二段([0-1]{1}[1-9][0-9]{1,2}[^0-9]?[0-9]{7,8}|[1-9]\d{6,7}) 即$2
[0-1]{1}解释：0到1之间（含）的数字必须出现一次
[1-9]解释：1到9之间（含）的数字必须出现一次
[0-9]{1,2}解释：0到9之间（含）的数字至少出现一次，最多出现两次
[^0-9]?解释：非数字的任意一个字符至少出现0次，最多出现一次
[0-9]{7,8}解释：0到9之间（含）的数字至少出现7次，最多出现8次
|解释：或者的意思
[1-9]解释：1到9之间（含）的数字必须出现一次
\d{6,7}解释：0到9之间（含）的数字至少出现6次，最多出现7次
最后面的([^0-9])解释：以非数字结尾（即$3 这样就能保证不匹配以0或1开头的大于12位的数字串了）
注注注：
此正则写法只可使用在JS的replace方法进行替换的情况，如果想用在其它地方，需要去掉正则前后的([^0-9]) 即使用[^0-9])([0-1]{1}[1-9][0-9]{1,2}[^0-9]?[0-9]{7,8}|[1-9]\d{6,7})([^0-9]，但是如果想更严谨一些的话，可以再改造。
其实我写的这段正则用在replace方法中匹配替换手机号与座机号时，还是不太严谨，但是绝大多数情况还是可以的。
==========================================
修改：
就在刚才，发布完文章，又做了一下修改，上面实例中双斜杠注释掉的部分是原来的
在它下面两行是改后的，这样就更严谨一些了。
var regexp = new RegExp(/([^0-9])([0-1]{1}[1-9][0-9]{1,2})([^0-9]?)([0-9]{7,8}|[1-9]\d{6,7})([^0-9])/g);
se = matchHtml.replace(regexp, '$1<a style="color:#09f;text-decoration:underline;" href="tel:$2$4">$2$3$4</a>$5');
把原来中间部分([0-1]{1}[1-9][0-9]{1,2}[^0-9]?[0-9]{7,8}|[1-9]\d{6,7})改为([0-1]{1}[1-9][0-9]{1,2})([^0-9]?)([0-9]{7,8}|[1-9]\d{6,7})
也就是把原来的中间部分分成了三个部分，现在全部正则为/([^0-9])([0-1]{1}[1-9][0-9]{1,2})([^0-9]?)([0-9]{7,8}|[1-9]\d{6,7})([^0-9])/
所以在替换的时候就有$1$2$3$4$5这五个部分可以参与替换了。
其中$2各$4是实际打可拨打号码的部分，所以在链接中使用href=”tel:$2$4″
中间部分就是$2$3$4的组合了
尾部$5
这样就防止替换的座机号存在非数字时也参与拨号的情况出现了，如抓取到的号码为010-12345678或010 12345678，在拨打时就是01012345678
我不知道在拨号时区号与直拨号间有横杠或空格时能不能拨得出去，没试，也就不试。
个人感觉，严谨一些的话，还是现在这样写正则比较好。
==========================================
再次修改正则：
上一次修改后不能匹配7位和8位的电话直拨号，有错误。
这回测试了，可用，没问题了。哈哈
另附一图，关于replace的替换变量的规律的，如下：
