任何人都可以帮我处理这个脚本,当html代码粘贴到textarea时应该替换标签?由于未知原因,只更换了一些标签,但大约1/4或1/5的标签不会被替换。
1>------ Build started: Project: circle, Configuration: Debug Win32 ------
1>Build started 3/12/2016 1:52:30 PM.
1>InitializeBuildStatus:
1> Touching "Debug\circle.unsuccessfulbuild".
1>ClCompile:
1> All outputs are up-to-date.
1>LINK : fatal error LNK1104: cannot open file 'C:\Users\Lamis\Documents\Visual Studio 2010\Projects\circle\Debug\circle.exe'
1>
1>Build FAILED.
1>
1>Time Elapsed 00:00:00.93
========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========
粘贴并应替换的文本:
<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 );
}
所以真的没有比赛。如何修复脚本以替换短字符串的所有指定标记和字符串?
注意:
添加了第3个索引"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,
控制台清楚地说明找不到img标记。但是源文本中有很多图像。最后一个索引:"@im: null" add.php:836
没有被替换,但由于未知原因它不在日志中。
编辑: 要减少代码,只需缩短模式数组: var editor = CKEDITOR.instances [&#39; edit&#39;];
'@im': /;"><img/gi
在控制台中:生成结果:&#34; @im:img,img,img,img,img,img,img&#34;并成功替换了img字符串。但是使用这个:
var hArray={ '@im': /img/gi }
不会产生任何结果。看起来有一些语法错误或某些行阻止匹配和.replace完成工作。
编辑: 我发现这个单个html文件有效:
'@im': /;"><img/gi
<body>
<script>
var str = '<img name=text>';
str = str.replace( /<img /gi ,'***');
// console.log( str );
alert(str);
</script>
</body>
无法打印str。这也可以在我的脚本中使用,但是如果我使用hArray:console.log( str );
那么这样做也没有改变。
答案 0 :(得分:3)
正则表达式不是解析HTML的正确工具。在RegEx match open tags except XHTML self-contained tags有一个很好的答案,虽然它有点自命不凡,但确实说明了这一点。除非这是一次性工作,不需要维护或仅限于单个输入,而且不会发生重大变化,否则Regex不是解析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.
});
答案 1 :(得分:0)
变量evt.data.dataValue的内容包含已翻译的标签:
alert(evt.data.dataValue);
<p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><br><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><br><tr><td class="tr-caption" style="text-align: center;"><i>some text here.</i></td></tr><br></tbody></table><br><br /><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><br><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><br><tr><td class="tr-caption" style="text-align: center;"><i>some text here.</i></td></tr><br></tbody></table><br><span class="answer"><span class="answer"><br /></span></span><br /><br><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><br><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><br><tr><td class="tr-caption" style="text-align: center;"><i><span class="answer"><span class="answer">some text here.</span></span></i></td></tr><br></tbody></table><br><span class="answer"><span class="answer"><br /></span></span><br><span class="answer"><span class="answer"></span></span><br /><br><br /><br /><br><div class="separator" style="clear: both; text-align: center;"><br><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><br /><br><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><br><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><br><tr><td class="tr-caption" style="text-align: center;">some text here.</td></tr><br></tbody></table><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><br><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><br><tr><td class="tr-caption" style="text-align: center;">some text here.</td></tr><br></tbody></table><br>some text here<br /><br><br /><br><div class="separator" style="clear: both; text-align: center;"><br><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><br /></p><p></p>
在进行正则表达式搜索之前,我需要摆脱替换!
这是在使用CKEditor并从剪贴板粘贴到textarea时成功替换标记的代码:
<script>
CKEditor_init();
var editor = CKEDITOR.instances['edit'];
var hArray={
'' : /&/gi, // REMOVE html entity: @
'<' : /</gi, // decode html entity
'>' : />/gi, // decode html entity
'@a\1': /https\:\/\/(\d)\.bp\.blogspot\.com\//gi,
'@s\1': /src="https:\/\/(\d)\.bp\.blogspot\.com\//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,
'@\\s': /<\/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,
'@j.': /\.jpg" /gi,
'@p.': /\.png" /gi,
'@g.': /\.gif" /gi,
'@im': /;"><img /gi,
'@sr': /src="'/gi,
'@s=': /src="/gi,
'@/a': /><a href=/gi,
'@d/': /<\/div><br>/gi,
'@b/': /<br>/gi,
'@/p': /<p><\/p>/gi,
'@\\p': /<\/p>/gi,
'@p-': /<p>/gi,
'@/i': /><i>/gi,
'@\1': /\/s\d*0\//gi,
'<': /</g , // encode html entity
'>': />/g // endcode html entity
};
editor.on( 'paste', function( evt ) {
for (k in hArray)
evt.data.dataValue = evt.data.dataValue
.replace( hArray[k], k );
});
</script>
SLO