Вставка br в текстовый узел

#javascript #append #textnode

#javascript #добавить #текстовый узел

Вопрос:

Это может показаться странным. У меня есть div с идентификатором ‘quotes’, а внутри есть блокquote. Я подумал, что было бы интересно добавить разрывы строк, если цитируемый текст был стихотворным, и я подумал, что вы могли бы использовать ‘@’ в качестве условного разрыва строки, а затем заменить это элементом br следующим образом:

 function addBr() {
    var c = document.getElementById("quotes");
    var t = c.getElementsByTagName("blockquote");    
    var reg = new RegExp("@", "g");
    for (var i = 0; i < t.length; i  ) {
        var r = t[i].lastChild.nodeValue.match(reg);
        if (r !== null) {
            var text = t[i].childNodes[0];
            var q = t[i].lastChild.nodeValue.indexOf("@");
            var x = document.createElement("br");
            t[i].insertBefore(x, text.splitText(q));
            t[i].lastChild.nodeValue = t[i].lastChild.nodeValue.replace(/@/g, "");
        }
    }
}

Это работает, но только для первого экземпляра, поэтому мне нужен цикл, но я не могу этого понять.
Div был бы таким:

 <div id = 'quotes'>
<blockquote> Some line, @ Some line, @ Some line@ </blockquote>
</div>

Любые подсказки были бы глубоко оценены.

1. Почему обратите внимание только на использование n (перевод строки)? Это допустимо для форматирования строк (какими текстовыми узлами являются, в любом случае).

2. @Matt: Потому что новые строки внутри текстовых узлов не отображаются браузерами как разрывы строк.

Ответ №1:

Начните с последнего совпадения @ в текстовом узле и работайте в обратном направлении. Следующая функция выполняет это, а также обладает преимуществом устранения ненужного регулярного выражения, использует более четкие имена переменных и является короче:

 function addBr() {
    var c = document.getElementById("quotes");
    var t = c.getElementsByTagName("blockquote");
    for (var i = 0; i < t.length; i  ) {
        var splitPos, textNode = t[i].lastChild;

        while ( (splitPos = textNode.data.lastIndexOf("@")) != -1 ) {
            var newTextNode = textNode.splitText(splitPos);

            // Remove the @ from the start of the new text node
            newTextNode.deleteData(0, 1);

            var br = document.createElement("br");
            t[i].insertBefore(br, newTextNode);
        }
    }
}

Ответ №2:

Я бы предложил просто сделать это:

 function addBr() {
    var c = document.getElementById("quotes");
    var t = c.getElementsByTagName("blockquote");    
    for (var i = 0; i < t.length; i  )
        r.innerHTML = r.innerHTML.replace(/@/g, "<br />");
}

Что такое «условный разрыв строки»? Я не вижу в вашем коде ничего, что решает, когда прерывать строку…