HTML+JS技术问题：如何提取div内容并拆分数值输出到p标签？

数据老陈

2026-5-28

解决提取价格文本及数值的JS问题

我来帮你搞定这个问题～你现在的代码出问题主要有两个核心原因，咱们一步步拆解修正：

问题根源拆解

document.getElementsByClassName("price-txt")返回的是HTMLCollection（元素集合），你得先取集合里的第一个元素（因为页面里只有一个这样的div），不能直接调用.value；
div、p这类非表单元素，获取内容要用textContent或者innerHTML，.value是专门给input、select这类表单元素用的属性。

正确实现代码

给你能直接运行的完整代码，还加了DOM加载完成的监听，避免页面元素还没渲染就执行JS：

document.addEventListener('DOMContentLoaded', function() {
  // 获取.price-txt元素，querySelector直接返回第一个匹配元素，比getElementsByClassName更简洁
  const priceElement = document.querySelector(".price-txt");
  // 获取完整价格文本，trim去掉前后可能的冗余空格
  const fullPrice = priceElement.textContent.trim();
  
  // 提取数值部分——两种方法任选一种：
  // 方法1：正则匹配数字，适配多种分隔场景（比如多空格、特殊符号）
  const priceNumber = fullPrice.match(/\d+/)[0];
  // 方法2：如果确定是空格分隔，用split分割取第一个元素
  // const priceNumber = fullPrice.split(' ')[0];
  
  // 按照需求格式插入到#demo标签中
  const demoElement = document.getElementById("demo");
  demoElement.innerHTML = `<p><em>${fullPrice}</em></p><p><em>${priceNumber}</em></p>`;
});