Get the Text Content from a Contenteditable Div Through JavaScript

get the text content from a contenteditable div through javascript

use jQuery and do

var content = $('#my-contenteditable-div').html();

also look up these links:

http://west-wind.com/Weblog/posts/778165.aspx

Extracting text from a contentEditable div

How can I get content of a contenteditable div with jQuery?

You should use a valid selector. As the div has a class, use the class selector $('.doc')

To know more about selectors, refer to the api docs

<!doctype html><html>
<head>  <title>My test</title>  <link rel="stylesheet" type="text/css" href="editor/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body style="overflow: hidden; margin-top: 50px">  <div contenteditable="true" class="doc">    <p contenteditable="true" class="letters">My editor</p>  </div>  <button id="but">Done Editing</button>
  <script>    $(document).ready(function() {      $('#but').on('click', function() {        console.log($('.doc').text());      });    });  </script></body>
</html>

how to get proper content of a contenteditable div

If you don't care about preserving line breaks, you can replace .html() with .text() to return just the text with no html.

If you want to preserve line breaks, but also not return any html, i.e. you'll need to replace the div and br html elements with the textual line breaks using the character /n. Here is a solution that works for both console or html output:

$('button').on('click', function(){ let ht = $('#divstory').html().replace(/<div>/g,"\n").replace(/<\/div>/g,"").replace(/<br>/g,"\n"); console.log(ht);   $("#result").text(ht);});

.divstory{ background:#eee;  min-height:54px;}#result{            white-space:pre; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divstory" id="divstory" contenteditable="true"></div><br><button>CLICK</button><br><div id="result"></div>

Extracting text from a contentEditable div

I forgot about this question until now, when Nico slapped a bounty on it.

I solved the problem by writing the function I needed myself, cribbing a function from the existing jQuery codebase and modifying it to work as I needed.

I've tested this function with Safari (WebKit), IE, Firefox and Opera. I didn't bother checking any other browsers since the whole contentEditable thing is non-standard. It is also possible that an update to any browser could break this function if they change how they implement contentEditable. So programmer beware.

function extractTextWithWhitespace(elems)
{
    var lineBreakNodeName = "BR"; // Use <br> as a default
    if ($.browser.webkit)
    {
        lineBreakNodeName = "DIV";
    }
    else if ($.browser.msie)
    {
        lineBreakNodeName = "P";
    }
    else if ($.browser.mozilla)
    {
        lineBreakNodeName = "BR";
    }
    else if ($.browser.opera)
    {
        lineBreakNodeName = "P";
    }
    var extractedText = extractTextWithWhitespaceWorker(elems, lineBreakNodeName);

    return extractedText;
}

// Cribbed from jQuery 1.4.2 (getText) and modified to retain whitespace
function extractTextWithWhitespaceWorker(elems, lineBreakNodeName)
{
    var ret = "";
    var elem;

    for (var i = 0; elems[i]; i++)
    {
        elem = elems[i];

        if (elem.nodeType === 3     // text node
            || elem.nodeType === 4) // CDATA node
        {
            ret += elem.nodeValue;
        }

        if (elem.nodeName === lineBreakNodeName)
        {
            ret += "\n";
        }

        if (elem.nodeType !== 8) // comment node
        {
            ret += extractTextWithWhitespace(elem.childNodes, lineBreakNodeName);
        }
    }

    return ret;
}

How to grab certain word inside contenteditable div

I have added here an id for your button and your textarea.

To achieve this you can add an eventlistener to your button element and let it listen to the click event.

When the button gets pressed get the text of the div with the textContent property and reassing it with the textContent property but replace all occurences of old word with new word by using the replaceAll() method.

document.getElementById('btn').addEventListener('click', replacer);

function replacer(){
let tx = document.getElementById('txarea');
tx.textContent = tx.textContent.replaceAll('this', 'that');
}

<div id="txarea">this is a sample text, this is another text</div><br>
<button id="btn">change 'this' to 'that'</button>

get selected texts inside content editable elements

This should get you started, although you will need to consider expanding on this code to cater for situations where someone selects outside of your text area and when someone presses the button and nothing is selected.

Oh, and I have console logged the output rather than alerted it.

$(document).ready(function(){
  $("#show").click(function(){
    range = window.getSelection().getRangeAt(0);
    console.log(range.toString());
  });
});

Get plain text from contenteditable div

With a bit of tweaking, https://github.com/vorushin/jsHtmlToText was just what I needed.

Get the Text Content from a Contenteditable Div Through JavaScript