Question

对于这个从未得到回答的旧问题，这是一个类似的问题：Wrap <a> tag around phone number using jquery

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

<div id="departments">
   <ul>
     <li> Department 1 - (555) 123-1234</li>
     <li> Department 2 - (555) 123-4321</li>
     <li> Department 3 - (555) 123-6789</li>
   </ul>
</div>

我知道大多数手机浏览器会自动将电话号码转换为可启动拨号器的可点击链接，电话号码随时可用。然而，并非所有人都这样做，我希望能够使用jQuery将上述内容转化为：

<div id="departments">
       <ul>
         <li> Department 1 - <a href="tel:5551231234">(555) 123-1234</a></li>
         <li> Department 2 - <a href="tel:5551234321">(555) 123-4321</a></li>
         <li> Department 3 - <a href="tel:5551236789">(555) 123-6789</a></li>
       </ul>
</div>

我理解产生此步骤的步骤涉及使用RegEx来匹配电话号码模式。

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

更新

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

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

来判断该模式是否有用

我认为现在的问题是如何正确地使用正则表达式在jQuery中进行查找和替换。我会继续研究，但如果有人想要插话。我会很感激。

Answer 1

以约翰的答案作为基础，我得到了它的工作：

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/

Answer 2

您可以使用正则表达式替换所有电话号码实例

JS

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

    text = text.replace(/(phone\-number)/g, "<a href=\"tel:$1\">$1</a>");

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

HTML

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

jQuery在页面上找到电话号码并换入<a href="tel: "> links</a>

2 个答案: