How to make certain words within an editable div stay of one color?

Asked

Viewed 618 times

1

I have a DIV which is editable by the user, only that I wanted when ee write Brasil it stays only this word green tabem as EUA turns red, but only certain words.

Code of the IVD:

<div id="texto" contenteditable = "true" ></ div>
javascript html css div

  • How does the user edit the div? The text is loaded into a text box and then saved by a button?

  • You could put the code you’re using?

  • You can create a CSS class and when it is brazil call the class . green if it is united states to class . red

  • @Viníciusbastos is not saved yet, and he ends up editing by the tag contenteditable = "true"

  • @Danielsaraiva as well could give + details or even an example?

  • @Daniel, I couldn’t find a change event using this attribute. (the most I could find was this link ). I can help in a function to convert the text, but I don’t know when this function could be called because I don’t know events for this property (if they exist).

  • @Daniel run the code below and see if you understand

  • In time, it is not necessary to assign the value true property. Only the occurrence of contentEditable already enables editing in the element.

Show 3 more comments

3 answers

1


You can take the keyup event and search the text if there is an occurrence of the word, existing this word in the text just replace it by replacing it, as the name says, and add some tag to include your style.

You can improve it in many ways, but on the basis you could accomplish something like:

HTML:

<div id="text" contenteditable="true">O </ div>

JS:

var text = document.getElementById('text');


text.onkeyup = function(evt) {
    var counter = this.textContent.split(/(Brasil)/i).length;

  if (counter > 1 && (!this.lastCount || this.lastCount < counter) ) {
        this.lastCount = counter;
    this.innerHTML = this.textContent.replace(/(Brasil)/g, "<b class='green'>Brasil</b>&nbsp;");

        var range = document.createRange();
    var sel = window.getSelection();
    var lastNode = text.childNodes.item(text.childNodes.length -1)
    range.setStart(lastNode, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
};

CSS:

.green{
  color:green;
}

See working on jsfiddle

1

As I mentioned in the comment, I don’t know what event you would use to call the function. But finding, an option is: when saving text, use replace with regular expression to insert span elements around the words, with the corresponding Styles.

var palavrasCores = {Brasil: "green", EUA: "red"};
var resultado = textoObtido.replace(/Brasil|EUA/gi, function(palavra){
    return '<span style="color: ' + palavrasCores[palavra] + '">' + palavra + '</span>';
});

0

function checkKey() {
var plaintext = document.getElementById("textbox");
if(plaintext.value == 'EUA') {
      plaintext.style.color = "#FF0000";
}
if(plaintext.value == 'BRASIL') {
      plaintext.style.color = "#66CD00";
   }
   if(plaintext.value != 'EUA' && plaintext.value != 'BRASIL') {
      plaintext.style.color = "#000000";
   }
}
</script>
<input type="text" id="textbox" name="plaintext" onKeyUp="checkKey()">

Browser other questions tagged javascript html css div

You are not signed in. Login or sign up in order to post.