在 JAVASCRIPT 中粘贴到 RTE 时删除 MS Word 格式答案

【问题标题】：Remove MS Word Formatting when pasted into RTE in JAVASCRIPT在 JAVASCRIPT 中粘贴到 RTE 时删除 MS Word 格式
【发布时间】：2016-01-21 14:26:24
【问题描述】：

我使用的是 EXTJS HTML 编辑器，字符是 2000，但是我正在剥离从 word 复制时出现的所有 MS Word 格式，我正在使用我在这里找到的这个功能

function cleanHTML(input) {
    // 1. remove line breaks / Mso classes
    var stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")? ^p)/g;
    var output = input.replace(stringStripper, ' ');

    // 2. strip Word generated HTML comments
    var commentSripper = new RegExp('<!--(.*?)-->','g');
    var output = output.replace(commentSripper, '');

    // 3. remove tags leave content if any
    var tagStripper = new RegExp('<(/)*(meta|link|span|\\?xml:|st1:|o:|font)(.*?)>','gi');
    output = output.replace(tagStripper, '');

    // 4. Remove everything in between and including tags '<style(.)style(.)>'
    var badTags = ['style', 'script','applet','embed','noframes','noscript'];

    for (var i=0; i< badTags.length; i++) {
        tagStripper = new RegExp('<'+badTags[i]+'.*?'+badTags[i]+'(.*?)>', 'gi');
        output = output.replace(tagStripper, '');
    }

    // 5. remove attributes ' style="..."'
    var badAttributes = ['style', 'start'];
    for (var i=0; i< badAttributes.length; i++) {
        var attributeStripper = new RegExp(' ' + badAttributes[i] + '="(.*?)"','gi');
        output = output.replace(attributeStripper, '');
    }
    return output;
}

但是，我想保持字体颜色不变，我试图删除字体参数但它不起作用。

【问题讨论】：

在这里找到？在这种情况下，最好有参考。
@code4jhon “在这里找到”我的意思是在“StackOverflow”找到这里
是的，但我的意思是最好有一个链接到你实际获得那段代码的地方，即使它引用另一个 SO 问题。

标签： javascript extjs ms-word

【解决方案1】：

我本周遇到了这个问题并找到了这篇文章，认为可靠的回应可能会帮助其他人。以下是我工作一天后的发现：

我一直在尝试做同样的事情，Alexander 的回答并没有解决问题，因为 <... style="color:" 位于 <span>tag 内（在第 2 步中被删除）。

如果字体不在范围内，则一直到此函数的底部（第 5 步），所有样式标签都将被删除。

我花了一整天的时间制定一个可能的解决方案（对 RegEx 的经验很少），我想出了这个：

function CleanWordFormatting(input) {
    // 1. Remove line breaks / Mso classes
    var stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g;
    var output = input.replace(stringStripper, ' ');

    // 2. Strip Word generated HTML comments
    var commentSripper = new RegExp('<!--(.*?)-->', 'g');
    var output = output.replace(commentSripper, '');
    var tagStripper = new RegExp('<(/)*(meta|link|\\?xml:|st1:|o:|font)(.*?)>', 'gi');

    // 3. Remove tags leave content if any
    output = output.replace(tagStripper, '');

    // 4. Remove everything in between and including tags '<style(.)style(.)>'
    var badTags = ['style', 'script', 'applet', 'embed', 'noframes', 'noscript'];
    for (var i = 0; i < badTags.length; i++) {
        tagStripper = new RegExp('<' + badTags[i] + '.*?' + badTags[i] + '(.*?)>', 'gi');
        output = output.replace(tagStripper, '');
    }

    // 5. Remove any unwanted styling
    // NOTE: Add your own list of 'blacklisted' css attributes here
    var badStyling = ['margin-top:', 'margin-bottom:', 'line-height:', 'mso-fareast-font-family:&quot;', 'font-weight:', 'margin:'];
    for (var i = 0; i < badStyling.length; i++) {
        attrStripper = new RegExp('(' + badStyling[i] + ')([^;]*)+[^]', 'gm');
        output = output.replace(attrStripper, '');
    }

    // 6. Remove any unwanted attributes
    var badAttributes = ['start'];
    for (var i = 0; i < badAttributes.length; i++) {
        var attributeStripper = new RegExp(' ' + badAttributes[i] + '="(.*?)"', 'gi');
        output = output.replace(attributeStripper, '');
    }

    return output;
}

这些是需要注意的几行与原始的不同：

var tagStripper = new RegExp('<(/)*(meta|link|\\?xml:|st1:|o:|font)(.*?)>', 'gi');

上面的行有 |span|部分已删除。

// 5. Remove any unwanted styling
// NOTE: Add your own list of 'blacklisted' css attributes here
var badStyling = ['margin-top:', 'margin-bottom:', 'line-height:', 'mso-fareast-font-family:&quot;', 'font-weight:', 'margin:'];
for (var i = 0; i < badStyling.length; i++) {
    attrStripper = new RegExp('(' + badStyling[i] + ')([^;]*)+[^]', 'gm');
    output = output.replace(attrStripper, '');
}

接下来，我添加了这个循环，它将删除任何不需要的样式标签

var badAttributes = ['start'];

最后，从 badAttributes 变量中移除样式。

这是一种 hack 工作，但这是我唯一能够开始工作的事情。祝你好运！

【讨论】：

【解决方案2】：

假设

所示版本按预期工作，
您已验证 HTML 包含 <font color=>，而不是 <span style="color:">，
只有正则表达式有问题

以下命题成立：如果你替换

new RegExp('<(/)*(meta|link|span|\\?xml:|st1:|o:|font)(.*?)>','gi');

与

new RegExp('<(/)*(meta|link|span|\\?xml:|st1:|o:)(.*?)>','gi');

字体标签不会从插入的 HTML 中删除，您会看到正确的颜色。

【讨论】：