如何实现文本框输入的逗号分隔字符串转列表？JS代码问题排查

• 变量逻辑错误：脚本中先通过var inputText存储了文本框的输入值，但拆分字符串时引用了从未定义的input变量，同时还重复用var重新声明inputText，会直接触发控制台报错，后续逻辑完全无法执行。
• 缺少结果渲染逻辑：代码最后一行仅读取了converted_list元素的innerHTML属性，既没有对该属性做赋值操作，也没有拼接处理后的列表内容，即使前面的拆分逻辑正常运行，页面也不会有任何输出。
• 输入未做基础清洗：直接按英文逗号拆分的逻辑没有处理常见的输入异常场景：比如用户在逗号前后输入空格、连续输入多个逗号、输入首尾带逗号的内容，拆分后的列表会出现带冗余空格的条目、空字符串类的无效内容，不符合使用预期。
• HTML结构不完整：原代码中<div id="converted_list">标签没有写闭合标记，可能造成页面布局错乱。

首先补全HTML的标签闭合，再调整JS的处理逻辑：

function convert_to_list() {
    // 获取文本框原始输入，清除首尾无效空白
    const rawInput = document.getElementById("csv_text").value.trim();
    // 按逗号拆分、逐条目去除前后空格、过滤拆分产生的空值
    const finalList = rawInput.split(",").map(item => item.trim()).filter(item => item !== "");
    // 拼接为无序列表结构，渲染到目标容器
    const listContent = `<ul>${finalList.map(listItem => `<li>${listItem}</li>`).join("")}</ul>`;
    document.getElementById("converted_list").innerHTML = listContent;
}

适配提示：如果需要兼容IE等不支持ES6语法的老旧浏览器，可以把const替换为var，把箭头函数改为普通匿名函数实现，核心的拆分、清洗、渲染逻辑保持不变即可。

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