JavaScript需提取DOM中价格文本，用正则/\D(?!.)/g清理非数字字符后parseFloat转数值，再通过Array.from()转数组并sort()排序，最后用DocumentFragment重排节点；点击表头时通过data-sort-order属性切换升序/降序状态。
怎么用 JavaScript 对 HTML 中的价格数据做升序/降序排序
直接操作 DOM 节点里的价格文本，不能靠 HTML 自身实现排序——它只是结构标记，没计算能力。必须用 JavaScript 提取、解析、比较、重排。
常见场景是商品列表（<div class="item"> 或 <code><li>）里含价格文字如 ¥299、￥1,299.00、$89.9。直接按字符串排序会出错（比如 "100" 排在 "20" 前面），所以得先转成数字。
- 用
textContent或innerText取出价格文本，再用正则清理非数字字符（保留小数点和负号） - 用
parseFloat()转数字，注意处理NaN（比如空值、纯符号） - 排序时用数组的
sort()方法，升序写(a, b) => a - b，降序写(a, b) => b - a - 排序后重新插入 DOM，别用
innerHTML +=拼接，避免事件丢失或 XSS 风险；推荐用DocumentFragment或批量appendChild
遇到带千分位逗号或货币符号的价格怎么安全提取数值
像 ¥1,299.50 或 $8,999 这类，直接 parseFloat("¥1,299.50") 会得到 1（因为逗号截断、符号跳过）。必须预处理。
推荐正则：text.replace(/[^\d.-]/g, '') —— 它只保留数字、小数点、负号，删掉所有其他字符（包括 ¥、$、逗号、空格、中文“元”等）。
- 别用
replace(/[^0-9.]/g, '')：漏掉负号，负价格变正 - 别用
parseInt()：它会截断小数，parseInt("199.99") === 199 - 对空字符串或纯符号，
parseFloat返回NaN，排序前要过滤或设默认值（如|| 0）
点击表头切换升序/降序时如何记住当前状态
用户点一次按价格升序，再点一次要降序，而不是每次都重置。需要在 JS 中维护一个状态变量，或者直接读写 DOM 属性。
- 最简单：给价格列的
<th> 加个自定义属性，比如 <code>data-sort-order="asc"，点击时 toggle 它的值 - 别用全局变量存状态，容易冲突；多个排序列（价格、销量、评分）更要靠元素自身属性隔离
- 排序前先清空之前加的视觉提示（比如
↑/↓符号），再根据新状态加对应图标 - 注意：DOM 更新后，如果用了事件委托，不需要重新绑定；但如果是直接绑在每个
<th> 上，也不用重绑<h3>为什么用 <code>Array.from()而不是querySelectorAll().sort()NodeList对象没有原生sort()方法，直接调会报错：TypeError: prices.sort is not a function。必须先转成真数组。用
Array.from(priceElements)最稳妥（兼容 IE11+），也比[...priceElements]更明确意图。- 别写
Array.prototype.slice.call(priceElements)：老写法，冗长且易错 - 别漏掉映射步骤：排序的是数值，但 DOM 节点本身要按数值顺序重排，所以得先
.map(el => ({ el, price: extractPrice(el) }))，再.sort()，最后.map(x => x.el) - 大量数据（>500 条）时，考虑加
requestIdleCallback防卡顿，但普通商品列表不用
真正麻烦的不是排序逻辑，而是价格格式的不一致——不同运营填的数据可能混着 ¥、$、无符号、带“起”字、甚至“面议”。上线前一定要用真实数据测各种边界 case，比如空价格、负数、科学计数法（极少见但可能）、全角数字。
- 别写
