HTML本身不能排序文本行，必须用JavaScript：将textarea内容按换行符分割为数组，调用sort()配合parseFloat等转换数值并比较，再join回字符串输出；需统一换行符、过滤空行、容错NaN。
HTML里没法直接排序文本行，得靠JavaScript
HTML本身只是标记语言，没有计算或排序能力。所谓“HTML文本排序工具”，实际是用 <textarea></textarea> 收集输入、用 Array.prototype.sort() 处理、再把结果塞回另一个 <textarea></textarea> 或 <pre class="brush:php;toolbar:false;"></pre>。如果你试图只写HTML标签就实现排序，一定会卡在“点按钮没反应”这一步。
常见错误现象：onclick="sortText()" 没绑定函数、document.getElementById 找不到元素、没加 type="button" 导致表单默认提交刷新页面。
- 必须把排序逻辑写在
<script></script>标签里，或外部 JS 文件中 -
<textarea></textarea>的value是换行符分隔的字符串，用.split('\n')转数组才可排序 - 数值排序要显式转数字：
(a, b) => Number(a) - Number(b)，否则'10' 会返回 true - 注意去除空行：用
.filter(line => line.trim())，不然排序结果里一堆空行
区分“按行排序”和“按项目排序”的分隔符处理
用户粘贴的文本可能是每行一个条目（如名单），也可能是逗号/竖线分隔的一整行（如 CSV 片段）。这两类场景必须用不同方式切分，否则排序对象错位。
比如输入 apple,banana,cherry，如果按 \n 切，得到的是 ['apple,banana,cherry'] —— 只有 1 个元素，根本排不了。
立即学习“前端免费学习笔记（深入）”；
- 按行排序：用
.split('\n')，适合日志、列表、代码片段等天然换行的文本 - 按自定义分隔符排序：先
.replace(/\r\n/g, '\n')统一换行符，再.split(/[,，\s+|\/]+/)（支持中文逗号、空格、竖线、斜杠） - 分隔符不能硬编码成
','就完事——用户可能用中文顿号、制表符，甚至混合使用 - 排序后拼接要用原分隔符还是统一用换行？需明确 UI 上提供选项，而不是默认“都变回换行”
sort() 默认是字符串字典序，数值排序必须传比较函数
直接调用 arr.sort() 会把数字当字符串比，导致 [10, 2, 11] 排成 [10, 11, 2]。这是最常被忽略的坑，尤其当用户输入的是版本号、端口号、年份这类“看着像数”的文本。
- 升序数值排序：
arr.sort((a, b) => parseFloat(a) - parseFloat(b)) - 降序数值排序：
arr.sort((a, b) => parseFloat(b) - parseFloat(a)) - 容错处理：对无法转数字的项（如
'abc'），parseFloat返回NaN，需提前过滤或 fallback 为 0 - 如果要保留原始格式（如
'001'排在'02'前），就得用字符串长度 + 字典序组合判断，不是单纯数值比较
在线工具的粘贴体验差，往往因为没处理剪贴板换行符和空白符
用户从 Excel、微信、Notes 粘贴内容时，经常带 \r\n、全角空格、零宽字符、甚至不可见的 Unicode 分隔符。这些不清理，split('\n') 会失效，排序后出现诡异空行或合并行。
- 统一换行符：
text.replace(/\r\n|\r/g, '\n') - 清理首尾空白：
text.trim() - 替换全角标点（如中文逗号、顿号）为英文逗号，方便后续分隔逻辑复用
- 检测并提示异常字符：用
/[\u200B-\u200D\uFEFF]/.test(text)查零宽空格，避免“明明看着没空格却分不开”的问题 - 不要依赖
onpaste事件做实时清洗——它触发时机不稳定，优先在点击排序按钮时集中处理
复杂点在于：用户不关心“用了什么算法”，只在意“我粘进去的 5 行名字，点了升序，出来是不是 ABCDE”。所有技术细节——分隔符识别、空白清洗、NaN 容错、Unicode 处理——都得藏在背后，且默认行为要符合直觉。一旦让用户手动选“分隔符类型”或“数据类型”，80% 的人会卡住。
