3

Vejam o código abaixo:

<style type="text/css">
    .format{
        color: red;
        font-style: italic;
    }
</style>

<div>
     <p>texto texto texto 'palavra-chave'. texto 'palavra-chave', texto texto.<p>
</div>

Dentro da div, ignorando tags, eu quero que sempre que for encontrado uma 'palavra-chave' colocar ela dentro de <span class="format">

Qual seria a melhor solução para isso usando JavaScript puro?

8
  • @Laerte por que deletou sua resposta?
    – ropbla9
    23/12/2014 às 18:48
  • Porque você pediu a solução em Javascript puro.
    – Laerte
    23/12/2014 às 18:49
  • @Laerte ah sim.
    – ropbla9
    23/12/2014 às 18:49
  • 1
    Em questão de segurança eu pessoalmente discordo deste método de limitar o usuário, pois existem maneiras mais eficazes e menos "limitantes" de tornar seguro um editor de texto online. Porém como isto atualmente foge do foco da questão atual, por favor teste a minha resposta.
    – Syzoth
    23/12/2014 às 19:32
  • 1
    Tens só uma div ou podem ser várias divs?
    – Sergio
    23/12/2014 às 19:56

1 Resposta 1

2

Essa funcionalidade é simples, dá para usar .split().join() ou regex para substituir o conteúdo com .replace().

Na sua versão mais simples seria:

var editavel = document.querySelector('div[contenteditable="true"]');
var novoConteudo = '<span class="format">palavra-chave</span>';
editavel.innerHTML = editavel.innerHTML.split('palavra-chave').join(novoConteudo);

jsFiddle: http://jsfiddle.net/u68b6tz8/

Se quiseres fazer essa substituição on the fly, a cada nova letra inserida, então a coisa fica mais interessante. Podes juntar um event listener para quando uma tecla é libertada (keyup) e verificar o conteúdo:

var editavel = document.querySelector('div[contenteditable="true"]');
editavel.addEventListener('keyup', function (e) {
    var novoConteudo = '<span class="format">palavra-chave</span>';
    this.innerHTML = this.innerHTML.split('palavra-chave').join(novoConteudo);

});

O problema agora que falta resolver é o careto/cursor, que sai da posição quando o HTML é substituído. No SOen encontrei duas perguntas sobre isso onde o Tim Down responde sobre como ler e como setar o cursor/careto. Essas respostas não resolvem o problema diretamente mas levaram-me a esta solução:

Três passos!

#1 - substituir todas as palavras quando o código corre pela primeira vez. Desta maneira sabemos que quando digitar-mos só irá aparecer uma nova de cada vez.

#2 - Usar o replace, com função! Desta maneira podemos inserir um span e para resolver o problema do careto damos a essa span um ID secreto.

#3 - Assim podemos selecionar esse elemento e apontar o careto para o inicio do proximo sibling.

Aplicado a este caso o código ficaria assim:

var palavraChave = 'palavra-chave';

// fazer substituições antes de começar a escrever
var editavel = document.querySelector('div[contenteditable="true"]');
var novoConteudo = '<span class="format">palavra-chave</span>';
editavel.innerHTML = editavel.innerHTML.split('palavra-chave').join(novoConteudo);

var editavel = document.querySelector('div[contenteditable="true"]');
editavel.addEventListener('keyup', function (e) {
    var regExp = new RegExp('(' + palavraChave + ')(?!<)', 'g');
    // se não houver nada para substituir, sair
    if (!this.innerHTML.match(regExp)) return;
    var novoConteudo = this.innerHTML.replace(regExp, function () {
        // trocar o match pelo novo conteudo
        return '<span id="span_secreto">' + palavraChave + '</span>';
    });
    this.innerHTML = novoConteudo;
    // ir buscar o elemento secreto criado para lhe retirar a ID e colocar a classe
    var span = document.getElementById('span_secreto');
    span.removeAttribute('id');
    span.classList.add('format');
    colocarCareto(span);
});

function colocarCareto(node) {
    // defenir que elemento o careto deve seguir. Criar um novo placebo se o span fôr o ultimo
    var target = node.nextSibling ? node.nextSibling : (function (el) {
        var novoTextNode = document.createTextNode(' ');
        el.appendChild(novoTextNode);
        return novoTextNode
    })(node);
    // colocar o careto no inicio do proximo elemento
    var range = document.createRange();
    range.setStart(target, 1);
    range.setEnd(target, 1);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}
.format {
    color: red;
    font-style: italic;
}
span.format {
    color: #aad;
}
<div contenteditable="true">
    texto texto texto palavra-chave. texto palavra-chav, texto texto.
</div>

O código ainda precisa de mais afinações, e talvez depois dê para encurtar. Mas a ideia principal e a funcionalidade fica.

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 .