如何选中<p>标签并将内容转为数组？尝试Array.from等方法未生效

实现方案 #

单p标签内容转数组（匹配你的代码场景）

你已经选对了目标元素，只需直接获取元素的textContent属性提取文本，再做分割过滤即可，完整代码如下：

// 选中目标p元素，也可以用id更精准：const targetP = document.getElementById('dates');
const targetP = document.querySelector('.data');

// 提取文本、按任意空白字符分割、过滤空值得到数组
const dateArr = targetP.textContent.split(/\s+/).filter(Boolean);

// 如果需要转为数字类型，可再加一步map
const dateNumArr = dateArr.map(Number);

console.log(dateArr);
// 输出：['1429', '1368', '1661', '1687', '1593', '1495', '1565', '1500', '1635']

所有p标签批量处理方案

如果需要选中页面内所有<p>标签，统一提取内容的话用以下代码：

// 选中所有p标签，返回类数组对象
const allP = document.querySelectorAll('p');
// 转为数组后遍历提取每个p的文本内容
const allPTextArr = Array.from(allP).map(p => p.textContent.trim());

原理解释 #

• DOM元素的textContent属性可以直接拿到元素内所有文本内容，包含换行、空格等空白字符，无需操作childNodes
• 正则/\s+/可以匹配任意数量的空格、换行、制表符，避免文本里不同空白格式导致的分割错误
• filter(Boolean)可以过滤掉分割后产生的首尾空字符串，这些空值是p标签首尾的换行空格导致的

内容的提问来源于stack exchange，提问作者Matteo