如何用JavaScript实现输入字符串排序并插入textarea功能？

架构老林

2026-8-11

实现输入字母排序并移入textarea的方案

直接给你完整的可运行代码，完全匹配你的需求：

<input type="text" id="inputText" placeholder="输入字母，比如andwe">
<button onclick="sortstring(document.getElementById('inputText'))">排序并移入</button>
<textarea id="resultText" rows="3" cols="20"></textarea>

<script>
function sortstring(inputElem) {
  // 获取输入框内容，去除首尾空格
  const inputVal = inputElem.value.trim();
  if (!inputVal) {
    alert('请输入内容');
    return;
  }
  
  // 核心排序逻辑：拆成字符数组 -> 排序 -> 转回字符串
  const sortedStr = inputVal.split('').sort().join('');
  
  // 把排序结果写入textarea
  document.getElementById('resultText').value = sortedStr;
}
</script>

关键细节说明：

给input标签加id="inputText"，按钮的onclick里通过document.getElementById('inputText')直接拿到这个元素，传给排序函数，这就是你要的「把input定义为元素传入函数」的实现方式。
排序逻辑拆解：
1. split('')将输入字符串拆成单个字符的数组，比如输入"andwe"会变成['a','n','d','w','e']
2. sort()对数组按字母顺序排序（默认规则对小写字母排序完全适用）
3. join('')把排序后的字符数组重新拼接成完整字符串，得到adenw
如果需要支持大小写混合场景（比如输入"aNdWe"想按自然字母顺序排序），可以把sort方法改成：
```
.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
```
这样会忽略大小写，输出统一排序后的结果。