JavaScript：实现仅按单词打乱字符（避免空格被打乱）

你的问题出在当前代码会把**所有字符（包括空格）**一起打乱，导致空格位置混乱。要实现仅打乱每个单词内部字符的效果，需要先按空格拆分字符串为独立单词，逐个打乱单词内的字符后再重新拼接。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
  * { font-family: Calibri; }
  p, input {font-size: 18px; }
</style>
</head>

<body>
  <h2>
    Click button to shuffle characters of the below string
  </h2>
  <p>
  </p>
  
  <p>
    <input type='button' value='Click to shuffle' id='bt' onclick='shuffle("Hello world")' />
  </p>
  
  <p id='result'></p>
</body>

<script>
  // 单独处理单个单词的字符打乱
  const shuffleWord = (word) => {
    let arr = word.split(''), arr_len = arr.length;
    while (arr_len) {
      let rnd = Math.floor(Math.random() * arr_len--);
      [arr[arr_len], arr[rnd]] = [arr[rnd] , arr[arr_len]];
    }
    return arr.join('');
  }

  let shuffle = (s) => {
    // 按空格拆分字符串为单词数组，逐个打乱后再拼接
    const shuffledWords = s.split(' ').map(word => shuffleWord(word));
    const str = shuffledWords.join(' ');
    
    document.getElementById('result').innerHTML = str;
  }
</script>
</html>

关键改动说明 #

• 新增shuffleWord函数：专门负责单个单词的字符打乱逻辑，复用你原来的打乱算法。
• 修改主shuffle函数：
  1. 用split(' ')将原字符串拆分为独立单词的数组，保留空格的分隔作用。
  2. 通过map遍历每个单词，调用shuffleWord处理单个单词。
  3. 最后用join(' ')将打乱后的单词数组重新拼接成带空格的完整字符串，确保空格位置不变，仅单词内部字符被打乱。

这样点击按钮后，就能得到类似eHllo rWold或Hlloe woRld的预期效果，不会再出现空格位置混乱的问题。

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