I'm converting my PHP code for replacing smiley codes with images, activating links and a few other things to JavaScript.
Separately the functions work well, but together I'm getting the same problem as this. I think that this method is a bit overkill, I've used the following regex in PHP and it avoided conflicting with activated links
loop..
$message = preg_replace('#(?<!\w)'.$smiley.'(?!\w)#i', '<img src="images/smilies/'.$img.'" class="smiley" />', $message);
endloop
Is there any way to convert this regex to JavaScript valid rules? Thanks
Edit to clarify what/how I'm doing:
var input = 'HellO! :* :P ;P :-( http://google.com www.google.com';
//input = input.replace(/(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig,'$1');
var smilies = {
'sad.png': [':\(', ':-\('],
'kiss.png': [':\*', ':-\*', ';\*', ';-\*'],
'tongue.png': [':P', ':-P', ';P', ';-P']
};
for(var smiley in smilies) {
input = input.replace(new RegExp(smilies[smiley].join('|'), "gi"), '<img src="images/smilies/'+ smiley +'" class="smiley" />');
}
console.log(input);
Javascript doesn't support lookbehind so what you can do is to look for word boundary instead. Consider this code:
var re = new RegExp('\\b' + smiley + '(?!\\w)', 'gi');
message = message.replace(re, '<img src="images/smilies/' + img + '" class="smiley" />');
UPDATE:
Leaving input untouched, you can have your for loop like this which escapes every special character in input match:
for(var smiley in smilies) {
input = input.replace(new RegExp(smilies[smiley].join('|')
.replace(/[*()$]/g, '\\$&'), "gi"),
'<img src="images/smilies/'+ smiley +'" class="smiley" />');
}
OUTPUT:
"HellO! <img src="images/smilies/kiss.png" class="smiley" /> <img src="images/smilies/tongue.png" class="smiley" /> <img src="images/smilies/tongue.png" class="smiley" /> <img src="images/smilies/sad.png" class="smiley" /> http://google.com www.google.com"
Related
So I have this code and would like to know how I could go ahead to put my javascript var into this string. I cannot seem to make a working code for myself.
For the image source i want picture.value to be in there. I have tried different solutions but have not managed to work it out myself. All help is greatly appreciated
var text = "<img src="">
I have currently been trying var text = "<img src=" + picture.value +">
but that doesn't seem to work for me.
You cannot use " & ' this together unless you escape it with a \.
var text = '<img src="' + picture.value + '">'
OR
var text = "<img src=\"" + "Hi" + "\">"
Try using ES6 new feature called Template literals (using quote). It is more cleaner and simpler.
var picture = {'value':'test-src-location'};
var text = `<img src="${ picture.value }">`;
console.log(text);
Assuming your picture.value is not empty.
var text = '<img src=' + picture.value + '>';
Example: https://jsfiddle.net/no293etL/
My javascript creates a line of html.
That html has an onclick event call to openSingle().
I need to pass a variable into that function.
onclick="openSingle('+findID+')"
When I check the dev panel when it runs, i get
onclick="openSingle(WP0100200-3a)"
The only thing that is missing is the quotes around the id.
But if i try to code in the quotes, it breaks the html and then puts everything out of order.
Here is my line of code and all the pertaining variables.
var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle('+findID+')"/>';
var paragraph = '<p id="Manual-para" class="colorMe"><a href="';
var redirect = linkMe + '#' + findID;
var manName = section.childNodes( x ).getAttribute( "manualName" );
var workPack = section.childNodes( x ).getAttribute( "workPacket" );
document.getElementById( "annotateBody" ).innerHTML += iconImage + paragraph + redirect + '">' + annotationTitle + ' - ' + manName + ' - ' + workPack + '</a></p>';
You can escape quotes with a backslash like so
var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\')"/>';
and as other comments suggested you should ideally avoid inline Javascript
Escape the single quotes, like this:
var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\')"/>';
try adding \' will fix the problem
var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\;)"/>';
Here is the answer: with escaping character \ for ' character
var iconImage = '<img src="../../resources/images/annotation-icon.png" style="float:left; margin-left:20px; margin-right:0px;"onclick="openSingle(\''+findID+'\;)"/>';
Also try concating ‘and’
One thing you could try doing is attach the onclick after you create the DOM node. This lets you be as flexible as you want and avoids having to eval strings and other things like that.
var domnode = /* get the image tag */
domnode.onclick = function(){ openSingle(findId) }
I have an online text editor, very well made however it does not currently support images.
I have this at the moment and don't feel it to be a very good way of doing it.
var = txt = "some text here oh and here's my image! [img]linktoimage.jpg[/img]";
var = txt.replace(/[img]/g, '<img src="');
var = txt.replace(/[/img]/g, '" alt="" />');
return txt;
And how would I go about adding attributes?
I would use a replacement function, to replace the substring as a whole and to build the replacement string more easily:
txt = txt.replace(/\[img\](.*?)\[\/img\]/g, function(match, src) {
return '<img src="' + src + '" alt="" />';
});
For more information, have a look at the MDN documentation.
var alt = json_data['alt']; // some text
var url = json_data['url']; // some url
var img_url = '<img src=\'/' + url + '?h=100&w=100\' alt=\'' + alt + '\'>';
$('#imagepreview').html(img_url); // translates to <img src="/some_url?h=100&w=100" alt="some_text">
Why does this happen and how can I prevent this?
& is actually the valid URL, not &
I personally don't see that happen, but nevertheless you should do it this way:
var img = $('<img />', {
src: '/' + url + '?h=100&w=100',
alt: alt
}).appendTo('#imagepreview');
That makes sure any escaping is done properly, such as the alt attribute!
You must use \u0026 instead of &
I'm trying to "remove" (just replace it with "") the following String:
<script type="text/javascript">
document.createElement("img").src="http://www.google.com"
</script>
From the following String:
<SCRIPT LANGUAGE=JavaScript>
var PAswf = "_ADPATH_[%SWF File%]";
var advurl = "_ADCLICK_";
var PAadvurl = escape(advurl);
var PAwidth = "[%Width%]";
var PAheight = "[%Height%]";
var wmValue = "_ADDCP(wm)_";
if (!wmValue)wmValue = "opaque";
var PAwmode = wmValue;
document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' WIDTH="'+ PAwidth +'" HEIGHT="'+ PAheight +'">');
document.write('<PARAM NAME=movie VAL'+'UE="' + PAswf + '?clickTag='+ PAadvurl +'"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE='+ PAwmode +'>');
document.write('<EMBED sr'+'c="'+PAswf + '?clickTag='+ PAadvurl +'" quality=high wmode='+ PAwmode);
document.write(' swLiveConnect=TRUE WIDTH="'+ PAwidth +'" HEIGHT="'+ PAheight +'"');
document.write(' TYPE="application/x-shockwave-flash">');
document.write('</EMBED></OBJECT>');
</SCRIPT>
<script type="text/javascript">
document.createElement("img").src="http://www.google.com"
</script>
As you can see, the String is at the bottom of the code block, but that shouldn't really matter. I've stored the first string as a variable, codeString, and tried the following.
// code refers to the bigger code string
code.replace(/codeString/gm, "");
Doesn't seem to match. I'm sure I'm doing something wildly wrong, but I've searched for about an hour and have come up empty. Any ideas?
/codeString/ is a regular expression searching for the literal "codeString", not a variable containing a pattern. Also, string.replace(pattern, replacement) does not modify string but returns a new string with the replacement applied.
You do not need a regular expression for stripping fixed strings like this, the next code will remove the string once from code:
var codeString = '<script type="text/javascript">\n' +
'document.createElement("img").src="http://www.google.com"\n' +
'<\/script>';
code = code.replace(codeString, "");
Well you can start with
code.replace(codestring, "");
If it needs to be a regular expression, you can use:
code.replace(new RegExp(codestring, "gm"), "");
but be aware that the regex metacharacters should be escaped with backslashes.