javascript - 动态地从 javascript 变量中剥离 HTML 标签

Question

我有以下 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();" />

我的脚本放在这里:

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
}

在我的第一个警报中它省略了标签..

但是当我动态包含标签时..它并没有省略标签..所以让我知道如何使用 javascript 而不是 jquery 动态去除 html 标签？

Answer 1

应该正常工作的代码的修改版本:

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;
}

演示:http://jsfiddle.net/LRCXM/2/

请注意，Firefox 需要 textContent 而不是 innerText。