先看一下案例效果：

HTML代码：

<input type="text" value="" id="bubble-input">
<button onclick="bubbleSort()">冒泡排序</button>
<h4 id="bubbleSort-result"></h4>

JS代码：

// 冒泡排序
function bubbleSort() {
       var arr = document.getElementById("bubble-input").value;
       var characters = arr.split('');
       var len = characters.length;
       for (var i = 0; i < len - 1; i++) {
           for (var j = 0; j < len - 1 - i; j++) {
               if (characters[j] > characters[j + 1]) {
                   var temp = characters[j];
                   characters[j] = characters[j + 1];
                   characters[j + 1] = temp;
               }
           }
       }
       document.getElementById("bubbleSort-result").innerHTML = "排序结果：" + characters
}

详解：

1. 获取输入字符串：

var arr = document.getElementById("bubble-input").value;

这行代码从页面上获取一个输入框的值（假设输入框的 id 是 bubble-input），并将这个值赋给变量 arr。

2. 将字符串转换为字符数组：

var characters = arr.split('');

使用 split(‘’) 方法将字符串 arr 转换为一个字符数组 characters，每个字符成为数组中的一个元素。

3. 获取数组的长度

var len = characters.length;

计算字符数组 characters 的长度，并赋值给变量 len。

4. 冒泡排序

for (var i = 0; i < len - 1; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
        if (characters[j] > characters[j + 1]) {
            var temp = characters[j];
            characters[j] = characters[j + 1];
            characters[j + 1] = temp;
        }
    }
}

• 外层循环控制总共需要进行的遍历次数。因为每遍历一次，都会将一个最大的元素放到数组的末尾，所以总共需要进行 len - 1 次遍历。
• 内层循环进行相邻元素的比较和交换。每次比较 characters[j] 和 characters[j + 1]，如果前者大于后者，则交换它们的位置。
• 交换位置的过程使用了一个临时变量 temp 来暂存 characters[j] 的值。

5. 显示排序结果

document.getElementById("bubbleSort-result").innerHTML = "排序结果：" + characters;

将排序后的字符数组 characters 显示在页面上一个具有 id 为 bubbleSort-result 的元素中。

示例：
假设输入框中的值为 “dacb”，则处理步骤如下
arr 的值为 “dacb”。
characters 的值为 [‘d’, ‘a’, ‘c’, ‘b’]。

• 外层循环第 1 次：
  • 内层循环第 1 次：[‘d’, ‘a’, ‘c’, ‘b’] 变为 [‘a’, ‘d’, ‘c’, ‘b’]（交换 d 和 a）。
  • 内层循环第 2 次：[‘a’, ‘d’, ‘c’, ‘b’] 变为 [‘a’, ‘c’, ‘d’, ‘b’]（交换 d 和 c）。
  • 内层循环第 3 次：[‘a’, ‘c’, ‘d’, ‘b’] 变为 [‘a’, ‘c’, ‘b’, ‘d’]（交换 d 和 b）。
• 外层循环第 2 次：
  • 内层循环第 1 次：[‘a’, ‘c’, ‘b’, ‘d’] 变为 [‘a’, ‘b’, ‘c’, ‘d’]（交换 c 和 b）。
  • 内层循环第 2 次：没有变化（c 和 d 已经是正确顺序）。
• 外层循环第 3 次：
  • 内层循环第 1 次：没有变化（a 和 b 已经是正确顺序）。

最终结果：[‘a’, ‘b’, ‘c’, ‘d’]。
页面上显示的结果为：排序结果：a,b,c,d。