引用文のCSSを実装したい

querySelectorAllで、contentクラスのテキストを全て取得する。

let elements = document.querySelectorAll('.content');

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

どういうこと。

let quo_regex = /```(.*?)```/g;

let elements = document.querySelectorAll('.content');
console.log(elements[0].innerHTML);

let str;
let SummaryArray;
let quoteStrings = [[]];
let normalStrings = [[]];

console.log(elements.length);

for (let i = 0; i < elements.length; i += 1) {
    while(SummaryArray = quo_regex.exec(elements[i].innerHTML)) {
        console.log(SummaryArray);
        console.log(SummaryArray[0]);
        quoteStrings[i].push(SummaryArray[0]);
        normalStrings[i].push(SummaryArray[1]);
    }
}

自分で書いてみたけど意味分からなくなってきた。

quo_regex.exec

文字列中で、正規表現に一致する文字列を探す。

動いた

let quo_regex = /```(.*?)```/g;

let elements = document.querySelectorAll('.content');

let str;
let SummaryArray;
let quoteString = [];
let normalString = [];

for (let i = 0; i < elements.length; i += 1) {
    while(SummaryArray = quo_regex.exec(str = elements[i].innerHTML)) {
        quoteString.push(SummaryArray[0]);
        normalString.push(SummaryArray[1]);

        console.log(quoteString);
        console.log(normalString);

        for(let j = 0; j < quoteString.length; j++) {
            str = str.replace(quoteString[j],
                '<div class="quote"><p>'
                + normalString[j] + '</p></div>');
        }
        document.querySelectorAll('.content')[i].innerHTML = str;
    }
}

ちょっと右に寄ってるのが気になるけど、無事実装できた。

querySelectorAllでcontentクラスの要素全部取ってきて、for文で回す。