How to clear tags from a string with JavaScript

Question

<div id="mydiv">
    <p>
        <b><a href="mypage.html">This is an example<a>.</b>
        <br>
        This is another example.
    </p>
</div>

<script type="text/javascript">
    var mystr = document.getElementById('mydiv').innerHTML;
    .....
</script>

I want to clear all tags, and get the salt text,

mystr = "This is an example this is another example.";

How can I do that?

Solution 1

Using innerText and textContent:

var element = document.getElementById('mydiv');
var mystr = element.innerText || element.textContent;

• innerText is supported by all browsers but FF
• textContent is supported by all browsers but IE

DEMO

I just saw that the string will still contain line breaks. You might want to remove them with replace:

mystr = mystr.replace(/\n/g, "");

Update:

As @Šime Vidas points out in his comment, it seems you have to handle the whites spaces a bit differently to fix the string in IE:

mystr = mystr.replace(/\s+/g, ' ');

Solution 2

Here is a different approach - remove the tags using replace with a regular expression:

document.getElementById('mydiv').innerHTML.replace(/\n|<.*?>/g,'')

Here is a fiddle

Solution 3

Try:

document.getElementById('mydiv').innerText || document.getElementById('mydiv').textContent;

Comments

[Šime Vidas]

The replace() will only replace one line-break - see here: jsfiddle.net/yPj3a/4

[Felix Kling]

@Sime: Ah right... I forgot that JavaScript's replace method works.... differently ;) Thanks and fixed.

[Šime Vidas]

replace(/\n/g, '') has browser compatibility issues. This: replace(/\s+/g, ' ') works cross-browser, see here: jsfiddle.net/yPj3a/8

[Felix Kling]

@Sime: Thanks :) (I have no IE to test though...)

[Šime Vidas]

From my testing \s+ will catch all white-space including line breaks which makes it the ultimate solution. \n is therefore not needed.