HTML, Javascript 도와주세요.. 가독성 사이트를 만들고 싶습니다

문자열을 텍스트에 입력하면 텍스트를 읽기 좋은 문단으로 쪼개고 스타일을 적용하고 싶습니다.

추가 기능으로는

  1. '.'이 발견되면 거기서 해당 문자열의 위치를 파악하여 거기까지 출력한다.

  2. 그리고 나머지는 위와 같은데 1번 기능을 만들려는데 자꾸 충돌이 일어나는지 제대로 안나오네요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .st{
            text-align: center;
        }
        html{
            width:100%;
            height: 100%;
        }
        .set_center{
            text-align: center;
        }

    </style>

    <title>가독성 제공 사이트</title>
</head>

<body>
    <div class="set_center">
        <h1 style="color:rgb(117, 117, 252)">가독성 제공 사이트</h1>

        <h3><br><br><br><br>사용법</h3>

        <p><br>일반 줄글을 복사 후 아래 박스에 붙여넣고 출력을 눌러주세요.<br><br></p>
    </div>
    <div>
        <div class="set_center">
            <input type="text" id="myText" value="글을 입력해 주세요.">
            <button onclick="Fun.set()">출력</button>
        </div>
    </div>

    <div>
        <div class="set_center">
            <h1><br></h1>
            <script>
                var index=0, count=0, x_Len=1000;
                while(index<100){
                    document.write("<h2 id='demo"+index+"'></h2>");
                    
                    index++;
                    count++;
                    if(count===3){
                        document.write("<br><br>");
                        count=0;
                    }
                }
            </script>
        </div>
    </div>

    <script> 
    
        var Fun={
            "i":"0",
            "j":"0",
            "x":"0",
            "flag":17,
            "div":"0",
            "set":function(){
                this.i=0;
                this.j=0;
                this.x=0;
                this.div=0;

                this.x=document.getElementById("myText").value;

                while(this.i<this.x.length){    
                    this.flag=17;

                    this.div=this.x.substr(this.i,this.flag); 

                    if(this.div.indexOf('.')===0 || this.div.indexOf('.')<17){    
                        this.flag=this.div.indexOf('.')+1; //  flag=3           
                    }else if(this.div.length<17){ 
                        this.flag=this.div.length; 
                    }else{
                        this.flag=17;
                    }

                    document.querySelector("#demo"+this.j).innerHTML = this.div.substr(0,this.flag);
                    this.i=this.i+this.flag;
                    this.j=this.j+1;
                    
                }
            }
        }
    
    </script>
    
</body>
</html>

이렇게 코딩인데

객체를 만들어서

Fun 객체의 set함수를 이용해서 결과를 도출하려합니다.