Transform the innerHTML of a contenteditable text element into a regular string format

Question

Transform the innerHTML of a contenteditable text element into a regular string format

When using a content-editable element, such as:

<span id="myinput" contenteditable="true">This is editable.</span>

and then trying to read its content from JavaScript with

document.getElementById('myinput').innerHTML

, you may encounter unexpected results, such as:

"blah " =>
```
innerHTML = "blah &nbsp "
```

"bonjour\n bonsoir" =>

innerHTML = "bonjour<br>bonsoir"

(Firefox) and

innerHTML = "bonjour<div>bonsoir</div>"

(Chrome)

It seems that there are many other translations happening into HTML...

Is there a way to convert the innerHTML into normal text?

(e.g. for the examples: "blah " and "bonjour\n bonsoir")

javascript css html contenteditable

Answer 1

Answer №1

Consider these methods:

// For Internet Explorer
document.getElementById('inputField').innerText

// For all other browsers
document.getElementById('inputField').textContent

If you need to handle line breaks, follow this approach:

var element = document.getElementById('inputField');
var nodes = element.childNodes;
var textContent = '';

for (var index = 0; index < nodes.length; index++) {                        
    switch(nodes[index].nodeName) {
        case '#text': 
            textContent += nodes[index].nodeValue;
            break;
        case 'BR':
            textContent += '\n';
            break;
    }
}
console.log(textContent);

Answer 2

Consider these methods:

// For Internet Explorer
document.getElementById('inputField').innerText

// For all other browsers
document.getElementById('inputField').textContent

If you need to handle line breaks, follow this approach:

var element = document.getElementById('inputField');
var nodes = element.childNodes;
var textContent = '';

for (var index = 0; index < nodes.length; index++) {                        
    switch(nodes[index].nodeName) {
        case '#text': 
            textContent += nodes[index].nodeValue;
            break;
        case 'BR':
            textContent += '\n';
            break;
    }
}
console.log(textContent);

Answer 3

Answer №2

Since the behavior varies across different browsers, it is necessary for you to handle this on your own:

var convert = (function() {
    var convertElement = function(element) {
        switch(element.tagName) {
            case "BR": 
                return "\n";
            case "P": // fall through to DIV
            case "DIV": 
                return (element.previousSibling ? "\n" : "") 
                    + [].map.call(element.childNodes, convertElement).join("");
            default: 
                return element.textContent;
        }
    };

    return function(element) {
        return [].map.call(element.childNodes, convertElement).join("");
    };
})();

To see it in action: http://jsfiddle.net/koyd8h59/1/

If you wish to include <h1> and other block-level tags, you will need to implement additional code.

Answer 4

Since the behavior varies across different browsers, it is necessary for you to handle this on your own:

var convert = (function() {
    var convertElement = function(element) {
        switch(element.tagName) {
            case "BR": 
                return "\n";
            case "P": // fall through to DIV
            case "DIV": 
                return (element.previousSibling ? "\n" : "") 
                    + [].map.call(element.childNodes, convertElement).join("");
            default: 
                return element.textContent;
        }
    };

    return function(element) {
        return [].map.call(element.childNodes, convertElement).join("");
    };
})();

To see it in action: http://jsfiddle.net/koyd8h59/1/

If you wish to include <h1> and other block-level tags, you will need to implement additional code.

Answer 5

Answer №3

Check out my response - it may not be flawless as some line breaks might disappear, but given the scarce information available, perhaps it will benefit someone.

const analyzeNode = node => {
    let data = ""

    for (const child of node.childNodes) {
      if (child.tagName === "BR") {
        data += "\n"
      }

      if (child.tagName === "DIV" && !child.querySelector("br")) {
        data += "\n"
      }

      if (child instanceof Text) {
        data += child.textContent
      } else {
        data += analyzeNode(child)
      }
    }

    return data
}

Answer 6

Check out my response - it may not be flawless as some line breaks might disappear, but given the scarce information available, perhaps it will benefit someone.

const analyzeNode = node => {
    let data = ""

    for (const child of node.childNodes) {
      if (child.tagName === "BR") {
        data += "\n"
      }

      if (child.tagName === "DIV" && !child.querySelector("br")) {
        data += "\n"
      }

      if (child instanceof Text) {
        data += child.textContent
      } else {
        data += analyzeNode(child)
      }
    }

    return data
}

Transform the innerHTML of a contenteditable text element into a regular string format

Answer №1

Answer №2

Answer №3

Similar questions

I continue to encounter a problem where GitHub refuses to navigate links, despite them being properly configured

How can I expand and collapse elements using Angular?

Position the Crossmark to align with text using CSS styling

How to Save Styles as a CSS File in Angular 4

Is your Vue.js chart malfunctioning?

Encountering a Module node browserify issue

Choosing jQuery over JQuery Mobile for a standard web application to effectively manage different devices

What is the best way to include a distinct Navbar within the admin dashboard using react js?

What is the best way to send an HTML report through email with embedded images as an attachment?

PHP MySQL failing to add data to database

Most effective method for integrating a JS module across all browsers

The picture won't stay within the confines of the container

Issues with Materialize autocomplete drop-down functionality

Colliding with sin() and cos() animations: Meshes entwined in motion

There seems to be an issue with the HighCharts chart export feature as it is not showing the Navigator graph

Retrieving the value of a button tag in JavaScript for an AJAX request

Two conflicting jQuery plugins are causing issues

Display a PHP warning message when attempting to add methods to ajax jQuery

How can you modify a button in Ionic 2 based on the login status, using a modal to redirect to a different page once authenticated?

Issue with FiFO on MacOs causes skewed borders to not display correctly