在 <span> 标签中查找属性的 Javascript 正则表达式是什么？答案

【问题标题】：What is the Javascript Regexp for finding the attributes in a <span> tags?在 <span> 标签中查找属性的 Javascript 正则表达式是什么？
【发布时间】：2011-08-08 17:30:22
【问题描述】：

我有一个<div contenteditable="true>，我正试图用它来从用户那里获取文本。我会使用一个简单的<textarea>，但我需要换行符，最终需要列表和表格等。我正在尝试构建一个半富文本编辑器，但不是一个完整的编辑器。我不想使用富文本编辑器。

我正在尝试从输入到 <div contenteditable="true> 的文本中消除 <span> 标记上的属性。有没有办法用正则表达式做到这一点？我在想出一个正则表达式时遇到了困难，因为我无法弄清楚如何使字符串以<span 开头并以> 结尾，并且中间可以有任意数量的字符。有没有办法将它结合到一个正则表达式中？我想出了/^<span >$/ 但这不起作用，因为两个字符串之间没有分隔符。像这样的工作：/^[<span][>]$/g？

【问题讨论】：

如果 HTML 是输入，正则表达式不是答案...
@Alnitak 输入不是 HTML 我有检索 HTML 的 Javascript。基本上，我要与之合作的是那些将从绿色和粗体等网页复制文本并将其粘贴到我的<div> 的人。我想在存储时摆脱那种样式。
如果您对 JavaScript 缺乏经验，那么您可能会在这方面做得过火。
@chromedude - 那仍然是 HTML
@Tim Down 你可能是对的。在某些方面我明白你在说什么，但在其他方面我必须在某个时候学习。半年前我觉得 AJAX 很酷，但只适用于那些非常熟练的人。在过去的几周里，我经常使用 AJAX，没有任何问题。

标签： javascript regex html-sanitizing

【解决方案1】：

我在http://jsfiddle.net/b3DSQ/做了一个工作演示

$('#editor span').each(function(i, el) {
    var attrs = el.attributes;
    $.each(attrs, function(i, a) {
        $(el).removeAttr(a.name);
    });
});

[我更改了一个早期版本，它将内容复制到内存中，编辑然后替换 - 没有意识到输入到 div 中的内容在 DOM 中自动有效]。

【讨论】：

你放错网址了吗？因为当我去那里时它会出现错误。
是的，我做到了 - 现在 URL 是正确的，但现在指的是早期版本的代码。

【解决方案2】：

为此使用 DOM 函数。下面是一些使用 jQuery 的代码，使其更易于阅读：

$('#your-div span').each(function() {
    var elem = this, $elem = $(this);
    $.each(elem.attributes, function(i, attr) {
        if(attr) {
            $elem.removeAttr(attr.name);
        }
    });
});

演示：http://jsfiddle.net/ThiefMaster/qfsAb/

但是，在您的情况下，您可能不仅要从跨度中删除属性，还要从所有元素中删除属性，除非该属性是例如align 或 href。

所以，这里有一些 JS：http://jsfiddle.net/ThiefMaster/qfsAb/1/

$('#your-div').children().each(function() {
    var elem = this, $elem = $(this);
    $.each(elem.attributes, function(i, attr) {
        if(attr && attr.name != 'href' && attr.name != 'align') {
            $elem.removeAttr(attr.name);
        }
    });
});

【讨论】：

这绝对符合我的要求。谢谢！

【解决方案3】：

解析 HTML，然后去掉属性。如果您在浏览器中执行此操作，您可以使用高级 HTML 解析器_{（或者您有 IE）}，所以使用它！

【讨论】：

对不起，我对 Javascript 比较陌生，我真的不确定我在浏览器中有什么解析器。很明显我只是很困惑。
@ThiefMaster o，好吧，我猜这是@nickf 表达问题的方式。

【解决方案4】：

试试这个：

your_string.replace(/<span[^>]*>/g, '<span>');

但是，如果用户写像 <span title="Go > there"> 这样的东西，这将会中断

【讨论】：

使用接受的答案，我的答案只解决了直接提出的问题，但不应该在这种情况下使用。