2011-04-21 83 views
4

上午在文本编辑器的工作范围内粗体,斜体风格,其中的内容可以在一些用户点击以下如何获得一个div

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

现在的形式,我不得不删除粗体和斜体从div的造型。

如何从div删除strong和em标签?

感谢

卡皮尔

+0

点击div或强/粗文本? – mplungjan 2011-04-21 05:39:24

+0

点击工具栏上的一个按钮 – 2011-04-21 06:09:26

+0

啊 - 为什么不使用像[tinymce](http://tinymce.moxiecode.com/) – mplungjan 2011-04-21 07:51:27

回答

4

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

我不知道,如果你想的jQuery,但它处理这样的事情很好:

// To remove styles from clicked element. 

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

这样的真正测试过的人问他关于javascript的问题,而不是jquery – 2011-04-21 05:40:59

+2

哦。我会保持它在这里说服作者,当做元素操作时,vanilla JS很难处理... – Blender 2011-04-21 05:41:59

+0

感谢您的快速回复。 – 2011-04-21 06:04:39

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

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

jsFiddle

请记住,此div的任何子女的任何活动都将丢失。

+0

+1对于单线程正则表达式解决方案。 – Blender 2011-04-21 05:44:00

+0

-1为单线正则表达式解决方案......(只是在开玩笑!) – ninjagecko 2011-05-04 22:22:01

2

请勿对此使用正则表达式或其他类型的文本替换。 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); 
+0

我会+1如果你没有*呃*我的回答... :) – alex 2011-05-04 23:29:29

+0

@alex:嘿。这有点晚了,我没有申请我通常的自我审查。抱歉。 – 2011-05-05 08:13:15