2012-01-26 2 views
1

Мне нужна помощь с помощью фрагмента JavaScript, который преобразует телефонные номера в tel: links?JavaScript для преобразования телефонных номеров в телефон: ссылки

Немного вещей, в которых я нуждаюсь в этом коде: 1) Только найти числа в тексте, не найти числа, которые находятся в атрибутах тегов. 2) После того, как номер найден, оберните его в tel: anchor. 3) Очистите номер атрибута href (удалите все, что не является числом). 4) Надеюсь, работа довольно быстро :)

Использование jQuery в порядке, но я не уверен, что это лучший способ.

Так JavaScript изменит все экземпляры на странице что-то вроде этого:

<div data-something-that-looks-like-phone-number="(111) 222-3333"></div> 
(000) 000-0000 

Для этого:

<div data-something-that-looks-like-phone-number="(111) 222-3333"></div> 
<a href="tel:0000000000"> (000) 000-0000</a> 

Вы заметите данные с чем-то, что-выглядит-как- Атрибут номер телефона не изменился.

У меня есть регулярное выражение, которое, кажется, работает хорошо для поиска телефонных номеров

[01]?[- .]?[\(\. ]?[2-9]\d{2}[\)\. ]?[- .]?\d{3}[- .]\d{4} 

Любой код, чтобы меня начали бы очень признателен. Благодаря!

Кроме того, ранее был аналогичный вопрос, и решение было «не беспокойтесь об этом, потому что телефоны делают это автоматически». Это решение не работает для нас, нам нужны телефонные ссылки даже на устройствах, которые не делают это автоматически. Еще раз спасибо ...

ответ

1

Я не понимаю, почему вам нужно регулярное выражение, если у вас есть атрибут данных:

$("div[data-number]").each(function() { 
    var $a = $("<a />").attr("href", "tel:" + $(this).data("number")); 
    $a.html($(this).html()); 
    $(this).html($a); 
}); 

Demo.

+0

спасибо за код, однако я только что составил атрибут данных, чтобы показать пример того, что я не хочу менять (плохой пример в ретроспективе).Если вы запустите регулярное выражение на весь источник страницы, вы найдете номер в атрибуте данных, но это не должно быть изменено ... Атрибут данных не будет присутствовать в реальном использовании, но аналогичное число может быть в теге где-то и его нужно оставить в покое ... – MCM

+0

Я отредактировал вопрос, чтобы использовать атрибут атрибутов данных. – MCM

0

Я думаю, что вы ищете что-то вроде этого.

var phoneRegEX = /([01]?[- .]?[\(\. ]?[2-9]\d{2}[\)\. ]?[- .]?\d{3}[- .]\d{4})/; 

$("div[data-number]").html(function(i, text) { 
    text = text.replace(phoneRegEX, "<a href='tel://$1'>$1</a>"); 
    return text; 
}); 

Однако ваше регулярное выражение кажется немного ограниченным

0

Довольно старый, но я сталкиваюсь с этим сегодня и не мог найти верное решение, так что я написал это регулярное выражение и добавить его в качестве кнопки закладки. Это испортит страницу (css/images), но позволяет вам нажимать на номер для набора.

javascript:document.body.innerHTML = document.body.innerHTML.replace(/((\d[\d\-.]*){9,})/g, '<a href="tel://$1">$1</a>'); 

Он будет соответствовать по меньшей мере 9 символам с цифрой,. или -


Я должен уточнить, что его просто предположим, чтобы помочь вам щелкнуть по номеру, чтобы набрать его не идеальным решением.

****** ****** Обновление

ОК, не мог спать, так что я создал что-то гораздо лучше. Теперь вам просто нужно щелкнуть по номеру, который будет отображаться на телефонной ссылке, а затем просто нажать на нее, как обычно.

javascript:document.addEventListener('click', function(e) { e = e || window.event; var target = e.target || e.srcElement; target.innerHTML = target.innerHTML.replace(/(([\d|\(][\d\-.\)\s]*){9,})/g, '<a _was_replaced="true" href="tel://$1">$1</a>'); if (!target.getAttribute("_was_replaced")) { e.preventDefault(); } }, true); 
Смежные вопросы