ECMAScript 2015 で導入された JavaScript のクラスを使う実験。一定文字数以上を改行させる。

2020年4月5日

ECMAScript 2015 で導入された JavaScript クラスを使って何か実験してみようと思ってやってみた。
ほぼバニラなJavaScriptで、一定数以上の文字があるとbrで改行させるというもの。中身はテストも何もしてないので、何の保証もないです。

GitHubにもアップしてます。

コードは毎日書いてるけど、ブログがまた少しご無沙汰しちゃったから、とりあえず何かしらあげようと思ってやってしまった。

あーこんな感じでClassかけるんだね、というのを実験した。
また改行のところはリライトか何かで。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <div class="word-break">
    テストテストテストテストテストテストテストテストここで一度コード上で改行
    あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ
    </div>
</body>
<style>
    .highlight {
        background: yellow;
        color: black;
    }
</style>
<script>
 
    class WordBreak {       
        constructor(elm) {
            this.elm = elm
        }
 
        execute(pos){
            let value = this.elm.textContent
            value = this.getBrContent(value,pos)
            this.elm.innerHTML = value
        }
 
        /**
        * 改行コードをhtml用に変換。posBreakが設定されている場合は、posBreakごとにも改行を入れる。
        * @param {String} value 加工したい文字列
        * @param {Number} posBreak 改行を何文字ごとに入れるかの設定
        */
        getBrContent(value, posBreak) {
            if (!value) return ''
            value = this.putBreakStrWithPosition(value, posBreak)
            return value.replace(/\n/g, '</br>')
        }
 
        /**
        * posBreakが設定されている場合は、posBreakごとに改行を入れる。
        * @param {String} value 加工したい文字列
        * @param {Number} posBreak 改行を何文字ごとに入れるかの設定
        */
        putBreakStrWithPosition(value, posBreak) {
            let result = value
            if (posBreak) {
                let current = 0
                result = ''
                while (current < value.length) {
                    let remainStr = value.substring(current)
                    let indexOfNextBreakPos = remainStr.indexOf('\n')
                    let isOverPosBreak = indexOfNextBreakPos > posBreak ||
                        (remainStr.length > posBreak && remainStr.indexOf('\n') == -1)
                    if (isOverPosBreak) {
                        // posBreak以上の文字がある場合は、それまでの文字列と改行文字を追加
                        result += remainStr.slice(0, posBreak) + '\n'
                        current += posBreak
                    } else if (indexOfNextBreakPos > 0) {
                        // posBreak前に既に改行文字がある場合は、改行文字までを追加
                        result += remainStr.slice(0, remainStr.indexOf('\n'))
                        current += remainStr.indexOf('\n')
                    } else if (remainStr.indexOf('\n') == 0) {
                        // 改行が1番目にある場合は、改行文字を追加
                        result += '\n'
                        current += 1
                    } else {
                        // 改行文字が含まれていない且つposBreak以下の文字列を追加
                        result += remainStr
                        current += remainStr.length
                    }
                }
            }
            return result
        }
 
    }
 
    let elms = document.getElementsByClassName("word-break")
    let wordBreak = new WordBreak(elms[0]);
    debugger
    wordBreak.execute(5)
 
 
</script>
 
</html>

JavaScriptJavaScript

Posted by takumioda