@dvhb/phone-highlight
Advanced tools
Automatically adds tel: attribute for phone numbers on your html page
jQuery plugin which helps you replace text phone numbers with <a href="tel:..."> tag.
It may be useful if you want to add user friendly markup on mobile devices, but want to keep text phone numbers in desktop version.
This plugin don't have library for detecting mobiles devices as a hard dependency. You are free to use your favorite one. For example mobile-detect.js
Check out demo (open from mobile device or use emulation).
At first, add jquery.phone-highlight.js into your <head>.
Then, put following into in you main.js:
$('p.containing-phones').phoneHighlight();
Or with mobile-detect.js
var md = new MobileDetect(window.navigator.userAgent);
if (md.mobile()) {
$('.phones').phoneHighlight();
}
Plugin will replace text phones with a tag.
Lorem ipsum dolor <a href="tel:+73812786644" class="phone">+7 (3812) 78-66-44</a>
NOTE! Do not execute plugin on whole body or other huge/interactive parts of the page! It may break other scripts or cause perfomance issues.
Plugin have 3 options which can be passed into its call:
$('.phone').phoneHighlight({
countrycode: '+7',
citycode: '3812',
minLenWithouCodes: 7
});
It tooks text content of marked nodes and removes all symbols excepting digits and leading plus sign.
Then plugin checks format of obtained result. There are 2 possible cases:
minLenWithouCodes option value. In this case countrycode and citycode
won't be added to phone.countrycode and citycode
Note, that default values of countrycode and citycode options is
empty strings.You can also override global code options by setting
appropriate data attributes:
<span class="phone" data-countrycode="+1" data-citycode="123">999-44-22</span>
At firts, you have to install dependencies by running npm install
and bower install. Now execute npm run test command.
FAQs
Automatically adds tel: attribute for phone numbers on your html page
We found that @dvhb/phone-highlight demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.