7

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:

    1. Se for um nodo de texto, é uma linha. Inclua na array.
    2. Se for um <br>, é uma linha em branco. Inclua "" na array.
    3. 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?

2 Respostas 2

7

Você se esqueceu de declarar a variável i usando var, o que fez com que ela se tornasse uma global. A chamada recursiva sobrescreve seu valor, de modo que quando ela retorna ele itera de novo sobre elementos já existentes (entrando na recursão de novo e voltando de novo).

Acrescente o var e a função ficará correta:

for (var i = 0; i < nodes.length; ++i) {
1
  • +1 por uma solução genial... ;)
    – utluiz
    Commented 10/01/2014 às 14:22
6

Gastei uns bons minutos depurando o código num fiddle, até perceber uma nuance muito, muito sutil.

A variável de controle do seu laço for está declarada como uma variável global sem o var, logo ela está ficando com "sujeira" a cada recursão.

Altere o código da seguinte forma:

...
for (var i = 0; i < nodes.length; ++i) {
...
6
  • 1
    haha me "bateu" por 13 segundos... :P
    – mgibsonbr
    Commented 10/01/2014 às 14:19
  • 2
    terei que aceitar pelos 13 segundos.. Funcionou! Commented 10/01/2014 às 14:20
  • Essa foi a situação mais curiosa que já vi... :)
    – utluiz
    Commented 10/01/2014 às 14:20
  • 1
    @bfavaretto Perplexo².
    – utluiz
    Commented 10/01/2014 às 14:23
  • 1
    Eu fiquei perprecto! =D Commented 10/01/2014 às 14:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .