关于#javascript#的问题：如何使用js或者php来做这种打乱

如何使用js或者php将下面这段话：

身上的痛让我难以入睡
脚下的路还有更多的累
追逐梦想总是百转千回
我行我素做人要敢作敢为
无怨无悔从容面对
风雨彩虹铿锵玫瑰
再多忧伤再多痛苦自己去背
纵横四海笑傲天涯永不后退

经过打乱后变为下面这个样子：

img

手写了个代码应该没问题的


<div id="text"></div>
<script>
var text = "身上的痛让我难以入睡<br />脚下的路还有更多的累<br />追逐梦想总是百转千回<br />我行我素做人要敢作敢为<br />无怨无悔从容面对<br />风雨彩虹铿锵玫瑰<br />再多忧伤再多痛苦自己去背<br />纵横四海笑傲天涯永不后退";

//将文本按行分割成数组
var lines = text.split("<br />");

var newtext=[];
for(var i=0;i<lines.length;i++){
    line_text = lines[i].split("");
    for(var j=0;j<line_text.length;j++){
        if(i==0){
            //第一行的文字是绿色
            newtext.push('<span style="color: blue">'+line_text[j]+'</span> ');
        }else if(i==1){
            //第二行的文字是橙色
            newtext.push('<span style="color: orange">'+line_text[j]+'</span> ');
        }else{
            newtext.push(line_text[j]+" ");
        }
    }    
}
// 打乱数组中每个字的顺序
newtext = newtext.sort(() => Math.random() - 0.5);

var newtextstr=""
for(var i=0;i<newtext.length;i++){
    // 9个字一行输出
    if((i+1)%9==0){
        newtextstr+=newtext[i]+"<br />";
    }else{
        newtextstr+=newtext[i];
    }    
}
document.getElementById("text").innerHTML=newtextstr;
</script>

网页中浏览效果如下：

img