Extract the text out of HTML string using JavaScript

by

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>"));

Here’s a version that allows you to have spaces between nodes, although you’d probably want that for block-level elements only:

function extractContent(s, space) {
  var span= document.createElement('span');
  span.innerHTML= s;
  if(space) {
    var children= span.querySelectorAll('*');
    for(var i = 0 ; i < children.length ; i++) {
      if(children[i].textContent)
        children[i].textContent+= ' ';
      else
        children[i].innerText+= ' ';
    }
  }
  return [span.textContent || span.innerText].toString().replace(/ +/g,' ');
};
    
console.log(extractContent("<p>Hello</p><a href="http://w3c.org">W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>"));

console.log(extractContent("<p>Hello</p><a href="http://w3c.org">W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>",true));

More Related Contents:

  1. Strip HTML from Text JavaScript
  2. Fastest method to escape HTML tags as HTML entities?
  3. How to read text file in JavaScript
  4. Finding line-wraps
  5. TinyMCE Paste As Plain Text
  6. JavaScript Scale Text to Fit in Fixed Div
  7. Text wrap in a element
  8. How do I escape a string inside JavaScript code inside an onClick handler?
  9. Getting selected text position
  10. Convert Text to Image using javascript [closed]
  11. How can I highlight the line of text that is closest to the mouse?
  12. Reformat string containing date with Javascript
  13. Create a string of variable length, filled with a repeated character
  14. Is there a flexible way to modify the contents of an editable element?
  15. Measuring text width/height without rendering
  16. How to put “” in a javascript string?
  17. Canvas text rendering (blurry)
  18. Removing backslashes from strings in javascript
  19. How to export source content within div to text/html file
  20. Strip HTML tags from text using plain JavaScript
  21. Find and replace nth occurrence of [bracketed] expression in string
  22. Does jQuery strip some html elements from a string when using .html()?
  23. When should I use double or single quotes in JavaScript?
  24. Javascript Equivalent to PHP Explode()
  25. Display unescaped HTML in Vue.js
  26. ToggleClass animate jQuery?
  27. IE6 Hover Issue
  28. How do I add something to my html using javascript without erasing the whole page
  29. How to get an element’s padding value using JavaScript?
  30. Connecting to remote SSH server (via Node.js/html5 console)

Leave a Comment