How to Get the Pure Text Without HTML Element Using JavaScript

How to get the pure text without HTML element using JavaScript?

[2017-07-25] since this continues to be the accepted answer, despite being a very hacky solution, I'm incorporating Gabi's code into it, leaving my own to serve as a bad example.

// my hacky approach:
function get_content() {
  var html = document.getElementById("txt").innerHTML;
  document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
  var element = document.getElementById('txt');
  element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
  txt.innerHTML = txt.innerText || txt.textContent;
}

.A {
  background: blue;
}

.B {
  font-style: italic;
}

.C {
  font-weight: bold;
}

<input type="button" onclick="get_content()" value="Get Content (bad)" />
<input type="button" onclick="gabi_content()" value="Get Content (good)" />
<input type="button" onclick="txt_content()" value="Get Content (shortest)" />
<p id='txt'>
  <span class="A">I am</span>
  <span class="B">working in </span>
  <span class="C">ABC company.</span>
</p>

Extract the text out of HTML string using JavaScript

Create an element, store the HTML in it, and get its textContent:

function extractContent(s) {  var span = document.createElement('span');  span.innerHTML = s;  return span.textContent || span.innerText;};    alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));

Strip HTML from Text JavaScript

If you're running in a browser, then the easiest way is just to let the browser do it for you...

function stripHtml(html)
{
   let tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Note: as folks have noted in the comments, this is best avoided if you don't control the source of the HTML (for example, don't run this on anything that could've come from user input). For those scenarios, you can still let the browser do the work for you - see Saba's answer on using the now widely-available DOMParser.

Get text with javascript excluding the different elements in a scope

This works just fine if you are using jquery. You first cloning the element then removing all the child elements in it. In your case all the span tags. after that it gets the text back

here is the link to the full article
Link

jQuery.fn.justtext = function() {   return $(this) .clone()   .children()   .remove()   .end()   .text();
};
console.log($("#txt").justtext());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="button" onclick="get_content()" value="Get Content"/><p id='txt'> Ronald.<span class="A">I am</span><span class="B">working in </span><span class="C">ABC company.</span></p>

HTML text to plain text in Javascript without imports or npm installs

This is a non-deprecated deprecated tag. <xmp>

<xmp> is not an easy-to-find tag... I would recommend using it!

It says its deprecated if you search it online... but after using it in a live display it is definitely a working tag!

Get pure text from HTML before a tag

 var div = document.getElementsByTagName ("div") [0];
 alert (div.childNodes[0].data );//Hi

Fiddle

Convert HTML to plain text in JS without browser environment

Converter HTML to plain text like Gmail:

html = html.replace(/<style([\s\S]*?)<\/style>/gi, '');
html = html.replace(/<script([\s\S]*?)<\/script>/gi, '');
html = html.replace(/<\/div>/ig, '\n');
html = html.replace(/<\/li>/ig, '\n');
html = html.replace(/<li>/ig, '  *  ');
html = html.replace(/<\/ul>/ig, '\n');
html = html.replace(/<\/p>/ig, '\n');
html = html.replace(/<br\s*[\/]?>/gi, "\n");
html = html.replace(/<[^>]+>/ig, '');

If you can use jQuery :

var html = jQuery('<div>').html(html).text();

using Rangy.js to paste plain text without HTML tags

Unfortunately you'll need a slightly hacky solution. I've described it here:

https://stackoverflow.com/a/3554615/96100

Here's a helpful in-depth answer to a similar question by a CKEditor developer:

Paste as plain text Contenteditable div & textarea (word/excel...)

How to Get the Pure Text Without HTML Element Using JavaScript