Anyone can help me to work this script which should replace tags when a html code is pasted into textarea? For unknown reason only some tags are replaced, but about 1/4 or 1/5 of the tags stays not replaced.
<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>
The text which is pasted and should be replaced:
<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 />
Far more I did a test with this:
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 );
}
And I got this in console log:
"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
So there really are not matches. How to fix the script to replace all the specified tags and strings for short strings?
Note:
The 3rd index '@im': /(img)/gi, was added just for testing purposes.
"@im: null" add.php:836 console says clearly that the img tag was not found. But there is a lot of images in the source text. The last index: '@im': /;"><img/gi was not replaced but it is not in the log for unknown reason.
Edit: To reduce the code just short the pattern array: var editor = CKEDITOR.instances['edit'];
var hArray={ '@im': /img/gi }
In console: produced result: "@im: img,img,img,img,img,img,img" and the img string was successfully replaced. But using this:
'@im': /;"><img/gi will not produce any results. Looks like there is some syntax error or something line that what prevents the match and .replace to finish the job.
Edit: What I have found is that this single html file works:
<body>
<script>
var str = '<img name=text>';
str = str.replace( /<img /gi ,'***');
// console.log( str );
alert(str);
</script>
</body>
console.log( str ); failed to print the str. This works also in my script but again if I use the hArray with this: '@im': /<img / so no change has been made.
