如何使用JavaScript提取div中以+开头的电话号码？

你的目标HTML结构如下：

<div>
    <span>+1 704 849 3340</span>
    <span>+5 662-325-5582</span>
    <span>+8 804-896-4087</span>
    <span>+545 804-896-4087</span>
    <span>5854</span>
    <span>text</span>
</div>

方法一：简单筛选以+开头的内容 #

直接遍历所有span元素，提取文本后过滤出以+开头的内容：

// 获取div下所有span节点
const spanElements = document.querySelectorAll('div span');
// 转换为数组并筛选目标号码
const targetPhones = Array.from(spanElements)
  .map(span => span.textContent.trim()) // 去除文本首尾空格
  .filter(text => text.startsWith('+')); // 筛选以+开头的内容

console.log(targetPhones);
// 输出结果：["+1 704 849 3340", "+5 662-325-5582", "+8 804-896-4087", "+545 804-896-4087"]

方法二：用正则匹配更严谨的电话号码格式 #

如果需要验证+后面是合法的号码字符（数字、空格、横杠），可以用正则表达式来筛选：

const spanElements = document.querySelectorAll('div span');
// 匹配以+开头，后续为数字、空格或横杠的内容
const phonePattern = /^\+[\d\s-]+$/;
const targetPhones = Array.from(spanElements)
  .map(span => span.textContent.trim())
  .filter(text => phonePattern.test(text));

console.log(targetPhones);

内容的提问来源于stack exchange，提问作者jimi-del