Question

正在使用文本编辑器，其内容可以采用以下形式

<div>some text <strong>bold text</strong> more <em>italic</em></div>

现在，在某些用户点击时，我必须从div中删除粗体和斜体样式。

如何从div中删除strong和em标签？

由于

卡皮尔西

Answer 1

<强> HTML

<div id="foo">
 <div>some text <strong>bold text</strong> more <em>italic</em></div> 
</div>

<强> JS

var t = document.getElementById('foo').innerHTML;
t = t.replace('<strong>', '');
t = t.replace('</strong>', '');
t = t.replace('<em>', '');
t = t.replace('</em>', '');
document.getElementById('foo').innerHTML = t;

Answer 2

我不确定你是否想要jQuery，但它可以很好地处理这样的事情：

// To remove styles from clicked element.

$('#editor *').click(function () {
  $(this).replaceWith($(this).text());
});

Answer 3

var element = document.getElementById('whatever');

element.innerHTML = element.innerHTML.replace(/<(strong|em)>(.*?)<\/\1>/g, '$1');

jsFiddle

请注意，此div的任何子女所附带的任何事件都将丢失。

Answer 4

请勿使用正则表达式或其他类型的文本替换。 DOM是一棵树。这样对待它，不要害怕它。到目前为止，它是处理此类事情的最安全，最残酷的方式。

function removeElements(container) {
    var elements = container.getElementsByTagName("*");

    // Make an array of the strongs and ems
    var strongsAndEms = [];
    for (var i = 0, len = elements.length; i < len; ++i) {
        if (/^(strong|em)$/i.test(elements[i].tagName)) {
            strongsAndEms.push(elements[i]);
        }
    }

    // Remove the strongs and ems
    for (var j = 0, el, child; el = strongsAndEms[j++]; ) {
        while ( (child = el.firstChild) ) {
            el.parentNode.insertBefore(child, el);
        }
        el.parentNode.removeChild(el);
    }
}

var div = document.getElementById("foo");
removeElements(div);

如何在div中获得大胆，斜体的样式

4 个答案: