Strip HTML Tags from javascript variable dynamically

Question

I am having the following html :

<div id="iView" name="iView" contenteditable="true" style="width: 545px; height:185px; border: 2px solid green;"><p>jgfj</p>hello this</div>
    <input type="button" value="click" onClick="getEditorText();" />

And my Script goes here :

function getEditorText(){
    var viewContent = document.getElementById('iView').innerHTML;
    alert(viewContent);
    //alert(viewContent.replace(/<([^>]+)>/ig,"")); nothing works
    //alert(viewContent.replace(/(<\S([^>]+)>)/ig,"")); nothing works
    //alert(viewContent.replace(/<[^>]+>/ig,"")); nothing works
    //alert(viewContent.replace(/<\/?[^>]+(>|$)/g, "")); nothing works
    //alert(viewContent.replace(/<(?:.|\n)*?>/gm, '')); nothing works
}

In my first alert it is omitting tags..

But when i include tags dynamically ..it is not omitting the tags..so let me know how to strip the html tags dynamically using javascript , not jquery?

Answer 1

Modified version of your code that should work properly:

function getEditorText() {

    var el = document.getElementById('iView'),
        viewContent = el.innerText || el.textContent;

    viewContent = viewContent.replace(/<([^>]+)>/ig,"")
        .replace(/(<\S([^>]+)>)/ig,"")
        .replace(/<[^>]+>/ig,"")
        .replace(/<\/?[^>]+(>|$)/g, "")
        .replace(/<(?:.|\n)*?>/gm, '');

    el.innerHTML = viewContent;
}

Demo: http://jsfiddle.net/LRCXM/2/

Note that Firefox needs textContent instead of innerText .

Answer 2

Use innerText instead of innerHTML . Demo

Answer 3

您可以使用此正则表达式去除html标签。

var strippedString=viewContent.replace(/<(?:.|\n)*?>/gm, '');