jQuery在页面上找到电话号码并包装在< a href =" tel:">链接 [英] jQuery find phone numbers on page and wrap in <a href="tel: "> links

问题描述

这与从未得到回答的旧问题类似:包装< a>使用jquery在电话号码周围标记

This a similar question to this old one that never got answered: Wrap <a> tag around phone number using jquery

我正在使用自定义CMS的现有网站中制作一个简单的jQuery移动网站.在CMS中，有些条目包含代码和文本，例如

I am making a simple jQuery mobile site out of an existing site that uses a custom CMS. In the CMS there are entries that contain code and text like

<div id="departments">
   <ul>
     <li> Department 1 - [phone]</li>
     <li> Department 2 - [phone]</li>
     <li> Department 3 - [phone]</li>
   </ul>
</div>

我知道大多数手机浏览器都会自动将电话号码转换为可点击的链接，这些链接会在拨号器准备就绪时启动拨号程序.但是，并非所有人都愿意，我希望能够使用jQuery将上述内容转换为:

I know that most mobile phone browsers will automatically convert the phone numbers to clickable links that launch the dialer with the phone number ready to go. However, not all do and I'd like to be able to use jQuery to turn the above into:

<div id="departments">
       <ul>
         <li> Department 1 - <a href="tel:[phone]">[phone]</a></li>
         <li> Department 2 - <a href="tel:[phone]">[phone]</a></li>
         <li> Department 3 - <a href="tel:[phone]">[phone]</a></li>
       </ul>
</div>

我理解产生此问题的步骤涉及使用RegEx匹配电话号码格式.

I understand the steps to produce this involve using RegEx to match a phone number pattern.

有什么想法吗?我觉得这对很多人来说是一个有用的插件.

Any ideas? I feel like this would be a helpful plugin to write for lot of people.

更新

以下是我使用以下答案和评论尝试过的内容:

Here is what I've tried using the answer and comments below:

var regex = ((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4};

var text = $("body:first").html();

text = text.replace(regex, "<a href=\"tel:$1\">$1</a>");

$("body:first").html(text);

小提琴: http://jsfiddle.net/PShYy/

我可以通过使用以下命令来确定该模式应该起作用: http://gskinner.com/RegExr/? 35o5p

I can tell that the pattern should work by using: http://gskinner.com/RegExr/?35o5p

我相信现在是如何正确进行查找和用正则表达式替换jQuery的问题.我将继续进行研究，但如果有人想加入，我将不胜感激.

I believe it is now a matter of how to correctly do a find and replace in jQuery with regex. I'll continue to research but if anyone wants to chime in. I'd appreciate it.

推荐答案

使用John的答案作为基础，我可以将其用于:

Using John's answer as a base I got it to work with:

var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g; 

var text = $("body:first").html();

text = text.replace(regex, "<a href=\"tel:$&\">$&</a>");

$("body:first").html(text);

演示: http://jsfiddle.net/PShYy/2/

这篇关于jQuery在页面上找到电话号码并包装在&lt; a href =&quot; tel:&quot;&gt;链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！