get the text content from a contenteditable div through javascript

Viewed 66332

I want retrieve the text content from a contentEditable div through javascript. What are the options of doing this? I've tried innerHTML but it doesn't work.

9 Answers

Use this:

function textFromDiv(selector) {
  const element = document.querySelector(selector);
  const text = element.html().replace(/<div>/g,"\n").replace(/<\/div>/g,"").replace(/<br>/g,"\n");
  return text;
}```

Here's my spin at it...

input = document.getElementsByTagName("div")[0];

input.onkeyup = function(){
    text = "";
    for(i=0; i<input.childNodes.length; i++){
        text += input.childNodes[i].textContent + "\n";
    }
    text = text.trim();
    console.log(text);
}

Vanilla JS solution

html:

<div 
  contenteditable="true"
  onkeyup="myFunction(this, event)"
></div>

js:

function myFunction(self, event){
  console.log(self.innerText) 
  console.log(event)
} 
Related