如何在div中使用加粗和斜体样式

Question

我正在开发一个文本编辑器，其中内容可以采用以下形式：

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

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

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

谢谢

Kapil

- Kapil Gupta

---

点击 div 或加粗的文本时？ - mplungjan

在工具栏上点击一个按钮 - Kapil Gupta

啊 - 为什么不使用像tinymce这样真正经过测试的编辑器呢？ - mplungjan

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;

- JoJo

Answer 2

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

// To remove styles from clicked element.

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

- Blender

---

他问的是 JavaScript 而不是 jQuery。 - Pranay Rana

好吧，我会把它留在这里，以说服作者在进行元素操作时使用纯JS会变得很困难... - Blender

这将删除所有格式。这可能是您想要的。这也可能不是您想要的。在后一种情况下，将 $(this) 转换为 $('strong,em', this)。 - ninjagecko

Answer 3

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

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

jsFiddle.

请注意，与此

的任何子元素相关联的事件将丢失。

- alex

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

- Tim Down

---

如果你不咳我的回答的话，我会点个赞... :) - alex

@alex：嘿。有点晚了，我没有像平常一样自我审查。抱歉。 - Tim Down