Tenho uma div
com contenteditable=true
no meu documento e pretendo fazer highlight em certas partes do texto enquanto o usuário digita (adicionar spans). Para tal preciso primeiro extrair o texto digitado pelo usuário na forma de uma string simples, sem tags, e preservando quebras de linha. Dessa forma <p>aa</p><p>bb</p>
geraria "aa\nbb"
e <div>aaa</div><div><br></div>
geraria "aaa\n"
. Para tal criei uma função que é chamada no oninput
da div e que deveria retornar um array com cada linha de texto (["aa", "bb"]
e ["aaa", ""]
para os exemplos acima).
Inicialmente fiz focando apenas no chrome. Ele cria o conteúdo da div conforme o usuário digita produzindo divs internas para cada linha. Em alguns casos divs podem ser geradas uma dentro da outra. Ex: (identação foi adicionada para legibilidade)
<div contenteditable=true>
primeira linha
<div>segunda linha</div>
<div><br></div>
<div>
quarta linha
<div>quinta linha</div>
</div>
</div>
Fiz o seguinte código para obter a array resultante:
function extractLines(elem) {
var nodes = elem.childNodes;
var lines = [];
for (i = 0; i < nodes.length; ++i) {
var node = nodes[i];
if (node.nodeName == "#text") {
lines.push(node.nodeValue);
}
else if (node.nodeName == "BR") {
lines.push("");
}
else { // DIV ou P
lines.push.apply(lines, extractLines(node));
}
}
return lines;
}
A ideia é bastante simples:
Para cada subnodo da div:
- Se for um nodo de texto, é uma linha. Inclua na array.
- Se for um
<br>
, é uma linha em branco. Inclua""
na array. - Se for um
<div>
ou<p>
, execute recursivamente esse algoritmo e insira o resultado no fim da array.
Mas esse mesmo código gera um loop sem fim em alguns dos meus testes, não entendo o motivo.
<div>aa<div><br></div></div>
=>["aa", ""]
<div>aa<div><br></div><div><br></div></div>
=> loop infinito
Por que esse loop infinito acontece? Há algo errado no meu código? Como implementar esse mesmo algoritmo sem esse problema?