How to replace Regexp in editable div using Javascript?

Question

I have a div editable where I capture all text within it. Hence I want in each occurrence of certain word this word is replaced by another. Very simple.

The code I tried did not work. It itself works only that the output does not work (which in this case is the input itself). But if it is placed in a alert() for example, it works.

JS

    function teste(){
        var campo = document.getElementById('editorid').textContent;
        var docrg = /palavra/g; // procurar por 'palavra' sem ignorar case
        campo.replace(docrg, "outrapalavra"); // replace 'palavra' por 'outrapalavra'
    }
    document.getElementById('botao').addEventListener('click',teste,false);

HTML

    <div id="editorid" contenteditable="true"></div>
    <button id="botao">clica</button>

CSS (optional for edge display only)

    #editorid{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            padding: 10px;
    }

Note: This problem is just a module of a text editor that I’m trying to do.

Answer 1

Here is a suggestion:

I think most of the code is easy to understand except for Expreg.

(palavra\-chave)(?!<) in parts would be:

() - group to capture text
palavra-chave - the text we want to capture where I escaped the - which in regex can mean amid "a" and "c". (in this case I think it would not be necessary, but by habit I put).
(?!<) - this means that what was before cannot be followed by <. I put this character so a new tag <span> for example will prevent checking.

document.querySelector('button').addEventListener('click', function () {
    var editavel = document.querySelector('div[contenteditable="true"]');
    var novoConteudo = '<span class="format">palavra-chave</span>';
    editavel.innerHTML = editavel.innerHTML.replace(/(palavra\-chave)(?!<)/g, novoConteudo);
});

.format {
    color: red;
    font-style: italic;
}
span.format {
    color: #aad;
}

<div contenteditable="true">
    <p>texto texto texto palavra-chave. texto palavra-chave, texto texto.</p>
</div>
<button>Mudar!</button>

Answer 2

I think we’re missing an assignment on that line:

campo.replace(docrg, "outrapalavra"));

Thus remaining:

var aux = campo.replace(docrg, "outrapalavra");

Or it may also be the additional parenthesis in the first instruction cited...