jQuery: parse HTML into text

Question

I use substr() on a string to output a set of characters from a message. My problem is that if the string contains HTML I would get the tags in the text.

Is it possible to parse the HTML before using substr() to only extract the text from the message itself?

Example 1:

var string = "Hi";

alert(string.substr(0, 7));

Alert:

Hi

Example 2:

var string = "<br/>Hi";

alert(string.substr(0, 7));

Alert:

<br/>Hi

Answer 1

Using jQuery.text() method, you can extract only the text.

var str = "<br/>Hi"

$('<p>' + str + '</p>').text(); //Wrap your input in a p element first to ensure you get the text if your string isn't wrapped in HTML.

Answer 2

You can remove the html via a regex, see the answer here and you can do something like this:

String.prototype.removeHtml=function(){
  return this.replace(/(<([^>]+)>)/ig,"");
}

var string = "<br/>Hi";

alert(string.removeHtml().substr(0, 7));

Fiddle: http://jsfiddle.net/fx3MJ/

Remove HTML Tags in Javascript with Regex

Answer 3

Yes using this:

var string = "<br/>Hi";
var stringStripped = string.replace(/(<([^>]+)>)/ig,"");
alert(stringStripped);

http://jsfiddle.net/hutchonoid/7T56N/

Answer 4

If you input is read in the DOM, you can use jQuery to get just the text. Example :

<p id="foo"><br />Hi</p>

var string = $('#foo').text();

alert(string.substr(0, 7)); //says "Hi"

See jQuery doc for reference.

Edit: If your input comes from somewhere else, you can still use jQuery, but there may be better solution.

var input = "<br />Hi";
var fakeElement = $('<div>' + input + '</div>');

var string = fakeElement.text();

alert(string.substr(0, 7)); //says "Hi"

Answer 5

You could replace html-tag with regex pattern

var string = string.replaceAll("<[^>]*>", "");

Answer 6

If you want to get the text with HTML tag, try to use .innerHTML from jQuery.

<p id="foo"><br />Hi</p>

$("#foo")[0].innerHTML;

Console: "<br />Hi"

Answer 7

You could leverage jQuery's text() function:

 $('<div>').append('<br />hi').text();

This creates a new element, to which you can append your markup, and then use text() to extract the text. A little round-about, but it works.

I'd recommend a regex solution over this.

Answer 8

try this:

var string = "<br/Hi>".replace(/&#39;/g, '\'').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&apos;/g, '\'');
alert(string);

Answer 9

Try this

var string = "<br/>Hi";

alert($('<span>'+string+'</span>').text().substr(0, 7));

FIDDLE