js如何把一个标签分割成多个相同的标签

比如下面的一个span标签，我想分成四个span标签，并且都带有当前span标签的样式

<p style="line-height: 1.5;">
    <span style="font-size: 18.6667px;">低价出口大幅扩大那你就快点快点四年
电脑就看看是肯定四大皆空封建士大夫附件是肯定菲尼克斯的就是打开飞机
喀什地方的飞机喀什地方建设的积分空手道解放是福克斯的肌肤上的纠纷的
设计方式打开放声大哭分四十四发地方适当方式就打发士大夫谁的粉是发送
大附件是否是否是发谁的粉上的发速度发速度饭卡手动阀士大夫山地车上的
发都是纷纷开始附件是的方式电风扇电风扇就的尝试多次受到从收到甲方收
款方式发士大夫士大夫积分说服大家都是士大夫看书打发时间的发射点飞机
大师傅发射点发你士大夫士大夫发生的看房的芳菲你但凡封建士大夫谁的粉
发的说法就是防水等级发射点发生大家士大夫十分到家士大夫士大夫发的是
封建士大夫都是发速度</span>
</p>

<p style="line-height: 1.5;">
      <span style="font-size: 18.6667px;">低价出口大幅扩大那你就快点快点四年电脑就看看是肯定四
大皆空封建士大夫附件是肯定菲尼克斯的就是打开飞机喀什地方的</span>
      <span style="font-size: 18.6667px;">飞机喀什地方建设的积分空手道解放是福克斯的肌肤上的纠纷的设计
方式打开放声大哭分四十四发地方适当方式</span>
      <span style="font-size: 18.6667px;">就打发士大夫谁的粉是发送大附件是否是否是发谁的粉上的发速度发速
度饭卡手动阀士大夫山地车上的发都是纷纷开始附件是的方式
电风扇电风扇就的尝试多次受到从收到甲</span>
      <span style="font-size: 18.6667px;">方收款方式发士大夫士大夫积分说服大家都是士大夫看书
打发时间的发射点飞机大师傅发射点发你士大夫士大夫发生的看房的芳菲你但凡封建士大夫谁的
粉发的说法就是防水等级发射点发生大家士大夫十分到家士大夫士大夫发的是封建士大夫都是发速度</span>
</p>

请各位都说说各自的看法

我把文本四等分做了个例子，你参考一下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./jquery-3.0.0.min.js"></script>
        <script>
            $(document).ready(function(){
                var old_span = $("#old_span");
                var content = old_span.text();
                for(var i=0;i<4;i++){
                    var new_span = $("<span>"+content.substring(content.length/4*i, content.length/4*(i+1)) +"</span></br>");
                    new_span.css('font-size',old_span.css('font-size'))
                    new_span.appendTo(old_span.parent());
                }
                old_span.remove();
                console.log(content);
            });
        </script>
    </head>
    <body>
        <div>
            <p style="line-height: 1.5;">
                <span id="old_span" style="font-size: 18.6667px;">低价出口大幅扩大那你就快点快点四年
            电脑就看看是肯定四大皆空封建士大夫附件是肯定菲尼克斯的就是打开飞机
            喀什地方的飞机喀什地方建设的积分空手道解放是福克斯的肌肤上的纠纷的
            设计方式打开放声大哭分四十四发地方适当方式就打发士大夫谁的粉是发送
            大附件是否是否是发谁的粉上的发速度发速度饭卡手动阀士大夫山地车上的
            发都是纷纷开始附件是的方式电风扇电风扇就的尝试多次受到从收到甲方收
            款方式发士大夫士大夫积分说服大家都是士大夫看书打发时间的发射点飞机
            大师傅发射点发你士大夫士大夫发生的看房的芳菲你但凡封建士大夫谁的粉
            发的说法就是防水等级发射点发生大家士大夫十分到家士大夫士大夫发的是
            封建士大夫都是发速度</span>
            </p>
        </div>
    </body>
</html>

img


拆分后的效果就是这样，不是等分的话你需要按照规则截取一下内容。
如有帮助，请采纳！

可以写个样式选择器，避免写多次
span
{
font-size: 18.6667px;
}

分割的规则讲清楚啊，span的innerText要以什么规则分割？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .title{
        display: block;
        color: red;
    }
</style>
<body>
    <div id="box"></div>
    <script>
        let str = 'aaaa,bbbb,ccc,dddd';
        // 根据你需求规则进行分割，这里只是做示例 通过逗号分割
        let innerHtmlStr = ``;
        str.split(',').forEach(item => {
            innerHtmlStr += `<span class="title">${item}</span>`
        })
        document.getElementById('box').innerHTML = innerHtmlStr;
    </script>
</body>
</html>

cloneNode() 方法可创建指定的节点的精确拷贝。
appendChild() 方法可向节点中添加子节点。
思路：将span拷贝三份，向p节点中添加拷贝的span，再将p的四个子节点循环赋值你要放的内容