javascript - 为什么 regex 或 .replace() 不使用 CKEditor 和 Javascript 替换脚本中的字符串？

Question

任何人都可以帮助我工作这个脚本，当将 html 代码粘贴到文本区域时，该脚本应该替换标签吗？由于未知原因，仅替换了部分标签，但大约 1/4 或 1/5 的标签未替换。

<script>
  CKE_init();
  var editor = CKEDITOR.instances['edit'];

var hArray={'@a\1': /https\:\/\/(\d)\.bp\.blogspot\.com\//gi,
       '@s\1': /src="https:\/\/(\d)\.bp\.blogspot\.com\//gi,
'@im': /(img)/gi,
'@d1': /<div class="separator" style="clear: both; text-align: center;">/gi,
'@sw': /<span class="answer"><span class="answer"><br \/><\/span>/gi, 
'@sp': /<span class="answer"><span class="answer">/gi,
'@ac': /align="center" /gi,
'@al': /align="left"/gi,
'@ar': /align="right"/gi,
'@cp\1': /cellpadding=("?\d*"? )/gi,
'@cs\1': /cellspacing=("?\d*"? )/gi,
'@tb': /<tbody>/gi,
'@st': /style="/gi,
'@ml': /margin-left: /gi,
'@mr': /margin-right: /gi,
'@tc': /"text-align: center;"/gi,
'@t:': /text-align: center;"/gi,
'@tl': /"text-align: left;"/gi,
'@tr': /"text-align: right;"/gi,
'@sa': /<span class="answer">/gi,
'@c1': /class="tr-caption-container" /gi,
'@c2': /class="tr-caption" /gi,
'@/t': /<\/table>/gi,
'@t/': /<\/tbody>/gi,
'@/r': /<\/td><\/tr>/gi,
'@w\1': /width="(\d*)" /gi,
'@h\1': /height="(\d*)" /gi,
'@bs': /<br \/><\/span><\/span><br \/>/gi,
'@s/': /<\/span><\/span><br \/>/gi,
'@/s': /<\/span><\/span>/gi,
'@ts': /<table /gi,
'@a/': /\/><\/a>/gi,
'@r/': /<tr><td /gi,
'@/b': /<br \/>/gi,
'@au': /auto; /gi,
'@b\1': /border="(\d*)"/gi,
'@n\1': /anchor="(\d*)"/gi,
'@d2': /<div class="separator"/gi,
'@/d': /<tr><td /gi,
'@da': /<\/a><\/div>/gi,
'@j': /\.jpg" \/>/gi,
'@p': /\.png" \/>/gi,
'@g': /\.gif" \/>/gi,
'@im': /;"><img /gi
};

  editor.on( 'paste', function( evt ) {
    for (k in hArray) 
      evt.data.dataValue = evt.data.dataValue
          .replace( hArray[k], k );

  });
</script>

粘贴并应替换的文本:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-RIsL-uwaO4/VstRPZ0U6dI/AAAAAAAAChw/MHWTQ09DRGQ/s1600/n%25C3%25A1let000.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="266" src="https://1.bp.blogspot.com/-RGIsL-uwaO4/VstRPZ0U6dI/AAAAAAAAChw/MHWTQ09DRGQ/s400/file0.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>some text here.</i></td></tr>
</tbody></table>
<br /><span class="answer"><span class="answer"><br /></span></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-Nv8BBDRzK8/VstSBSdINlI/AAAAAAAACh4/UoCuxubTGlY/s1600/n%25C3%25A1let002.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="266" src="https://4.bp.blogspot.com/-NTv8BBDRzK8/VstSBSdINlI/AAAAAAAACh4/UoCuxubTGlY/s400/file2.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>some text here.</i></td></tr>
</tbody></table>
<span class="answer"><span class="answer"><br /></span></span><br />
<br />
<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-PVNoX7ffiw/VstXyi3a-dI/AAAAAAAACiI/-Ijv2cOzSwc/s1600/F4F-3-45kg-2s.gif" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://2.bp.blogspot.com/-PVWNoX7ffiw/VstXyi3a-dI/AAAAAAAACiI/file.gif" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i><span class="answer"><span class="answer">some text here.</span></span></i></td></tr>
</tbody></table>
<span class="answer"><span class="answer"><br /></span></span>
<span class="answer"><span class="answer"></span></span><br />
<br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-_mOBQG5AEbE/Vs9U3jodYWI/AAAAAAAACm0/TuIvD8_N0w/s1600/bounce%2Bf4f-3%2Bwildcat.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-_mOBQG5AEbE/Vs9U3jodYWI/AAAAAAAACm0/TuIYvD8_N0w/s1600/files.jpg" /></a></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-Wi3KwbjGO4/Vs9VBQNkd2I/AAAAAAAACm4/H0BWjNyHtsk/s1600/F4F-3-45kg-2s-low.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://2.bp.blogspot.com/-Wio3KwbjGO4/Vs9VBQNkd2I/AAAAAAAACm4/H0BWjNyHtsk/s1600/file.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">some text here.</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-mztbZKi6uQ/Vs9fMJMdU1I/AAAAAAAACnI/pHx73lxSlTU/s1600/F4F-3-45kg-2s-low-2-right.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://1.bp.blogspot.com/-mztbbZKi6uQ/Vs9fMJMdU1I/AAAAAAAACnI/pHx73lxSlTU/s1600/file.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">some text here.</td></tr>
</tbody></table>
some text here<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-ToAt8EbjaRM/Vs9hLgWFr9I/AAAAAAAACnU/6UZ65VW2nY/s1600/ttss.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-ToAt8EbjaRM/Vs9hLgWFr9I/AAAAAAAACnU/6U8Z65VW2nY/s1600/filenamehere.gif" /></a></div>
<br />

我还用这个做了测试:

  editor.on( 'paste', function( evt ) {
    for (k in hArray) 
{
console.log(k + ': ' +evt.data.dataValue
          .match( hArray[k] ));
      evt.data.dataValue = evt.data.dataValue
          .replace( hArray[k], k );
}

我在控制台日志中得到了这个:

"wysiwyg" add.php:782
"editor is ready" add.php:778
"@a: 1.bp.blogspot.com/,https://1.bp.blogspot.com/,https://4.bp.blogspot.com/,https://4.bp.blogspot.com/,https://2.bp.blogspot.com/,https://2.bp.blogspot.com/,https://3.bp.blogspot.com/,https://3.bp.blogspot.com/,https://2.bp.blogspot.com/,https://2.bp.blogspot.com/,https://1.bp.blogspot.com/,https://1.bp.blogspot.com/,https://2.bp.blogspot.com/,https://2.bp.blogspot.com" add.php:836
"@s: null" add.php:836
"@im: null" add.php:836
"@d1: null" add.php:836
"@sw: null" add.php:836
"@sp: null" add.php:836
"@ac: align="center" ,align="center" ,align="center" ,align="center" ,align="center" " add.php:836
"@al: null" add.php:836
"@ar: null" add.php:836
"@cp: cellpadding="0" ,cellpadding="0" ,cellpadding="0" ,cellpadding="0" ,cellpadding="0" " add.php:836
"@cs: cellspacing="0" ,cellspacing="0" ,cellspacing="0" ,cellspacing="0" ,cellspacing="0" " add.php:836
"@tb: null" add.php:836
"@st: style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style=",style="" add.php:836
"@ml: margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: ,margin-left: " add.php:836
"@mr: margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: ,margin-right: " add.php:836
"@tc: null" add.php:836
"@t:: text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;",text-align: center;"" add.php:836
"@tl: null" add.php:836
"@tr: null" add.php:836
"@sa: null" add.php:836
"@c1: class="tr-caption-container" ,class="tr-caption-container" ,class="tr-caption-container" ,class="tr-caption-container" ,class="tr-caption-container" " add.php:836
"@c2: class="tr-caption" ,class="tr-caption" ,class="tr-caption" ,class="tr-caption" ,class="tr-caption" " add.php:836
"@/t: null" add.php:836
"@t/: null" add.php:836
"@/r: null" add.php:836
"@w: width="400" ,width="400" ,width="640" " add.php:836
"@h: height="266" ,height="266" ,height="400" " add.php:836
"@bs: null" add.php:836
"@s/: null" add.php:836
"@/s: null" add.php:836
"@ts: null" add.php:836
"@a/: null" add.php:836
"@r/: null" add.php:836
"@/b: null" add.php:836
"@au: auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; ,auto; " add.php:836
"@b: border="0",border="0",border="0",border="0",border="0",border="0",border="0"" add.php:836
"@n: anchor="1",anchor="1",anchor="1",anchor="1"" add.php:836
"@d2: null" add.php:836
"@/d: null" add.php:836
"@da: null" add.php:836
"@j: null" add.php:836
"@p: null" add.php:836
"@g: null" add.php:836

所以确实没有匹配项。如何修复脚本以将所有指定的标签和字符串替换为短字符串？

注意:第三个索引'@im': /(img)/gi,添加只是为了测试目的。 "@im: null" add.php:836 控制台明确表示找不到img标签。但源文本中有大量图片。最后索引:'@im': /;"><img/gi未被替换，但由于未知原因不在日志中。

编辑:要减少代码，只需缩短模式数组:var editor = CKEDITOR.instances['edit'];

var hArray={ '@im': /img/gi }

在控制台中:产生结果:“@im: img,img,img,img,img,img,img”并且img字符串被成功替换。但使用这个: '@im': /;"><img/gi不会产生任何结果。看起来有一些语法错误或某些行阻止了匹配和 .replace 来完成工作。

编辑:我发现这个 html 文件可以工作:

<body>
<script>
var str = '<img name=text>';
str = str.replace( /<img /gi ,'***');
// console.log( str );
alert(str);
</script>
</body>

console.log( str );无法打印 str。这也适用于我的脚本，但如果我将 hArray 与此一起使用: '@im': /<img /所以没有做任何改变。

Answer 1

正则表达式不是解析 HTML 的正确工具。关于这个问题有一个很好的答案:RegEx match open tags except XHTML self-contained tags ，虽然有点自命不凡，但确实说明了这一点。除非这是一项不需要维护的一次性工作，或者仅限于不会发生重大变化的单个输入，否则正则表达式不是解析 HTML 的正确工具。

<小时/>

那么什么是正确的工具呢？嗯，HTML 是 XML 的一种特殊形式，因此理论上您可以使用 XML 解析器。然而，对于 javascript 有一个更好的方法。您会看到，Javascript 被设计为与 HTML 一起工作。因此，您可以将 HTML 输入视为 HTML 页面并像平常一样处理它:

editor.on( 'paste', function( evt ) {
    var el = document.createElement('html');
    el.innerHTML = evt.data.datavalue
    //Now do whatever editing you have to do to replace in here using the normal DOM tools.
});