JavaScript将电话号码转换为tel:链接

qrjkbowd  于 2023-03-16  发布在  Java
关注(0)|答案(4)|浏览(191)

我需要一些帮助我的JavaScript,将电话号码转换为电话:链接?
我需要这段代码来做一些事情:1)只查找文本中的数字,不查找位于标签属性中的数字。2)一旦找到数字,将其 Package 在tel中: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>

您会注意到data-something-that-looks-like-phone-number属性没有改变。
我有一个正则表达式,它似乎可以很好地搜索电话号码

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

任何代码让我开始将不胜感激。谢谢!
此外,有一个类似的问题,解决方案是“不要担心它,因为手机会自动这样做。”该解决方案不为我们工作,我们需要的电话链接,即使在设备上不自动这样做。再次感谢...

cclgggtu

cclgggtu1#

很老了,但是我今天遇到了这个问题,找不到任何有效的解决方案,所以我写了这个正则表达式,并添加了它作为一个书签按钮。它弄乱了页面(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);
aiazj4mn

aiazj4mn2#

我不明白为什么你需要一个正则表达式,如果你有数据属性:

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

Demo.

ujv3wf0j

ujv3wf0j3#

我觉得你在找这样的东西。

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;
});

然而,您的正则表达式似乎有点有限

vojdkbi0

vojdkbi04#

这里有一些代码实际上不会完全打乱CSS和图像,尽管它仍然违反了依赖于特定层次结构的CSS规则,因为它插入了SPAN元素,所以我不建议在一般情况下使用,但在某些情况下可能会有所帮助。
我仍在寻找完美的解决方案:

// Define a function to check if an element is a text node
function isTextNode(node) {
  return node.nodeType === Node.TEXT_NODE;
}

// Find all elements on the page
const elements = document.getElementsByTagName('*');

// Loop through each element and search for phone numbers in text nodes
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  const childNodes = element.childNodes;

  // Loop through the child nodes of the element
  for (let j = 0; j < childNodes.length; j++) {
    const node = childNodes[j];

    // Check if the child node is a text node
    if (isTextNode(node)) {
      const html = node.textContent;

      // Replace phone numbers with links
      const phoneRegex = /([\d|\(][\d\-.\)\s]*){9,}/g;
      const linkTemplate = '<a href="tel:$&">$&</a>';
      const linkedHtml = html.replace(phoneRegex, linkTemplate);

      // Update the text content of the text node if necessary
      if (linkedHtml !== html) {
        const newNode = document.createElement('span');
        newNode.innerHTML = linkedHtml;
        element.replaceChild(newNode, node);
      }
    }
  }
}

相关问题