Question

我有一些联系信息，我希望将电话号码包含在<a>中，并在href中包含数字，以便智能手机支持。

初始标记：

<p class="myClass">
    <a href="mailto:mail@mail.com">mail@mail.com</a><br />
    Phone: 88 88 88 88<br />
    Fax: 88 88 88 87<br />
</p>

现在，标记将保持不变，但数字和地址将会改变。因此，我的第一个想法是在“Phone”之后启动一个锚点，并在第二个break标记之前关闭它，然后获取该值并将其粘贴在href中。可悲的是，它不会那样工作，因为标签会立即关闭。

$("p.myClass:contains('Phone')").each(function(){
    var org = "Phone: ";
    var rep = "Phone: <a>";

    $(this).html( $(this).html().replace(org, rep) );
    $("</a>").insertBefore("p.myClass:contains('Phone') br:nth-child(3)");
});

所以我真正希望最终得到的是将电话号码包裹起来，如下：

Phone: <a href="tel:{number}">{number}</a>

，其中{number}是动态值，其余的标记保持不变。我正在寻找一种实际可行的解决方案，它最好比我上面制造的混乱更清洁。 :)有什么想法吗？

Answer 1

$("p.myClass:contains('Phone')").each(function(){
    var elem = jQuery(this);
    var html = elem.html().replace(/(Phone: )([^<]+)/i,"$1 <a href='tel:$2'>$2</a>");   
    elem.html(html); 
});

Running example

Answer 2

我会这样做。

将电话＃裹在span。

<p class="myClass">
    <a href="mailto:mail@mail.com">mail@mail.com</a><br />
    <span id="phone">Phone: 88 88 88 88</span><br />
    Fax: 88 88 88 87<br />
</p>

然后执行以下操作

var phone = $('#phone').text().split(": ");
$('#phone').html(phone[0] + ': <a href="tel:' + phone[1] + '">' + phone[1] + '</a>');

http://jsfiddle.net/jasongennaro/ARUms/

Answer 3

您是否可以控制标记？如果是这样，我建议在<span class='xxx'>标签中包装各个位，其中类是电话/传真/电子邮件。这样可以更容易地将各种比特用于替换。或者，全力以赴并使用hCard微格式： - ）

定位段落内的动态文本

3 个答案: