Passing double quotes to Jscript - html

insertText is java script that accepts two string paramters
I need to pass two strings
first parameter:
<img src="
second
">
I just cant figure out how to pass double quote as parameter
This works
<a onClick="insertText('<em>', '</em>'); return false;">Italic</a>
This does not
<a onClick="insertText('<img src=/"', '/">'); return false;">Image</a>
Prints '); return false;">Image

You want to use \ rather than /

The escape character for JavaScript is \, not /. So try this:
<a onClick="insertText('<img src=\"', '\">'); return false;">Image</a>
Update:
The solution above doesn't work, because the double-quotes "belong" to the HTML and not to the JavaScript, so we can't escape them in the JavaScript code.
Use this instead:
<a onClick="insertText('<img src=\'', '\'>'); return false;">Image</a> // --> <img src='...'>
or
<a onClick='insertText("<img src=\"", "\">"); return false;'>Image</a> // --> <img src="...">
Since you are using jQuery, why don't you do it the jQuery way?
insertText = function(a, b) {
// your insertText implementation...
};
$('a').click(function() { // use the right selector, $('a') selects all anchor tags
insertText('<img src="', '">');
});
With this solution you can avoid the problems with the quotes.
Here's a working example: http://jsfiddle.net/jcDMN/

The Golden Rule for that is reversing the quotation which means I use the single quotation ' inside the double quotation " and vice versa.
Also, you should use the backslash symbole to espape a special character like ' and ".
For example,
the following commands should work as they apply the rules mentioned above...
<a onClick="insertText('<em>', '</em>'); return false;">Italic</a>
or
<a onClick='insertText("<em>", "</em>"); return false;'>Italic</a>
or
<a onClick="insertText('<img src=\"', '\">'); return false;">Image</a>
or
<a onClick='insertText("<img src=\'", "\'>"); return false;'>Image</a>
I hope this helps you ...

You need to escape it.
<a onClick="insertText('<img src=\"', '\">'); return false;">Image</a>

Related

What is this Invalid regular expression flag error?

I'm conditionally rendering a div in my React app. This...
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades.</div>
works but I want to include a link in the second option like so
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades. Click <a to={{/page}}>here</a> to make a trade.</div>
But I'm getting this error: "Parsing error: Invalid regular expression flag" at the closing a tag.
Why is this?
This happens because you should use the to this way:
Notice: if you are using the html a tag, you would probably want to change to to href
<a to="/page">here</a>
// or
const to = "/page"
...
<a to={to}>here</a>

Call a function in <img> to define the path of the src

I'm trying to to something like that :
<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">
The function is :
getIcon(status){
switch (status) {
case 'Ongoing':
return '../../../../assets/img/icon/PinPlot.png';
case 'Signaled':
return '../../../../assets/img/icon/PinWarning.png';
case 'Finished':
default:
return '../../../../assets/img/icon/Pin red.png';
}
}
But all I get is no image like if it's not found. But no error nor warning.
Any idea ?
Use [src]:
<img id="icon" class="cercle icon" [src]="getIcon(item.status)" alt="">
And also you dont need to getIcon({{item.status}}) but without {{}}.
Although the previous answer of using [src] is the way I would recommend, the reason why your existing technique doesn't work is because you're not using interpolation (i.e. {{....}} ) correctly.
You have:
<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">
when you probably meant:
<img id="icon" class="cercle icon" src="{{ getIcon(item.status) }}" alt="">
Explanation:
You can think of it this way. Within your template, everything outside {{ }} is treated as literal strings. It's only things within the double braces that are treated as code to execute. So, with your example, because of where you put your braces, you'd end up with the string:
src="getIcon(Ongoing)"
after the interpolation, cuz you're only including the item.status within your braces, instead of the entire expression.

Regex for no space between attributes html

How to detected no space between attributes.
Example:
<div style="margin:37px;"/></div>
<span title=''style="margin:37px;" /></span>
<span title="" style="margin:37px;" /></span>
<a title="u" hghghgh title="j" >
<a title=""gg ff>
correct: 1,3,4
incorrect: 2,5
How to detected incorrect?
I've tried with this:
<(.*?=(['"]).*?\2)([\S].*)|(^/)>
But it's not working.
You should not use regex to parse HTML, unless for learning purpose.
http://regexr.com/3cge1
<\w+(\s+[\w-]+(=(['"]?)[^"']*\3)?)*\s*/?>
This regular expression matches even if you don't have any attribute at all. It works for self-closing tags, and if the attribute has no value.
<\w+ Match opening < and \w characters.
(\s+[\w-]+(=(['"])[^"']*\3)?)* zero or more attributes that must start with a white space. It contains two parts:
\s+[\w-]+ attribute name after mandatory space
(=(['"])[^"']*\3)? optional attribute value
\s*/?> optional white space and optional / followed by closing >.
Here is a test for the strings:
var re = /<\w+(\s+[\w-]+(=(['"]?)[^"']*\3)?)*\s*\/?>/g;
! '<div style="margin:37px;"/></div>'.match(re);
false
! '<span title=\'\'style="margin:37px;" /></span>'.match(re);
true
! '<span title="" style="margin:37px;" /></span>'.match(re);
false
! '<a title="u" hghghgh title="j" >'.match(re);
false
! '<a title=""gg ff>'.match(re);
true
Display all incorrect tags:
var html = '<div style="margin:37px;"></div> <span title=\'\'style="margin:37px;"/><a title=""gg ff/> <span title="" style="margin:37px;" /></span> <a title="u" hghghgh title="j"example> <a title=""gg ff>';
var tagRegex = /<\w+[^>]*\/?>/g;
var validRegex = /<\w+(\s+[\w-]+(=(['"]?)[^"']*\3)?)*\s*\/?>/g;
html.match(tagRegex).forEach(function(m) {
if(!m.match(validRegex)) {
console.log('Incorrect', m);
}
});
Will output
Incorrect <span title=''style="margin:37px;"/>
Incorrect <a title=""gg ff/>
Incorrect <a title="u" hghghgh title="j"example>
Incorrect <a title=""gg ff>
Update for the comments
<\w+(\s+[\w-]+(="[^"]*"|='[^']*'|=[\w-]+)?)*\s*/?>
I got this pattern to work, finding incorrect lines 2 and 5 as you requested:
>>> import re
>>> p = r'<[a-z]+\s[a-z]+=[\'\"][\w;:]*[\"\'][\w]+.*'
>>> html = """
<div style="margin:37px;"/></div>
<span title=''style="margin:37px;" /></span>
<span title="" style="margin:37px;" /></span>
<a title="u" hghghgh title="j" >
<a title=""gg ff>
"""
>>> bad = re.findall(p, html)
>>> print '\n'.join(bad)
<span title=''style="margin:37px;" /></span>
<a title=""gg ff>
regex broken down:
p = r'<[a-z]+\s[a-z]+=[\'\"][\w;:]*[\"\'][\w]+.*'
< - starting bracket
[a-z]+\s - 1 or more lowercase letters followed by a space
[a-z]+= - 1 or more lowercase letters followed by an equals sign
[\'\"] - match a single or double quote one time
[\w;:]* - match an alphnumeric character (a-zA-Z0-9_) or a colon or semi-colon 0 or more times
[\"\'] - again match a single or double quote one time
[\w]+ - match an alphanumeric character one or more times(this catches the lack of a space you wanted to detect) ***
.* - match anything 0 or more times(gets rest of the line)
Try this regex , i think it will work
<\w*[^=]*=["'][\w;:]*["'][\s/]+[^>]*>
< - starting bracket
\w* - one or more alphanumeric character
[^=]*= - It will cover all the character till '=' shows up
["'][\w;:]*["'] - this will match two cases
1. one with single quote with having strings optional
2. one with double quote with having strings optional
[\s/]+ - match the space or '\' atleast one occurence
[^>]* - this will match all the character till '>' closing bracket
Not sure about this I am not so experienced at regex but this looks like it is working well
JS Fiddle
<([a-z]+)(\s+[a-z\-]+(="[^"]*")?)*\s*\/?>([^<]+(<\/$1>))?
Currently <([a-z]+) will mostly work but with web component and <ng-* this would better be \w+
---------------
Output:
<div style="margin:37px;">div</div> correct
<span title=" style="margin:37px;" />span1</span> incorrect
<span title="" style="margin:37px;" />span2</span> correct
<a title="u" title="j">link</a> correct
<a title=""href="" alt="" required>test</a> incorrect
<img src="" data-abc="" required> correct
<input type=""style="" /> incorrect

How to concatenate .png to the a href

I have the following code inside my asp.net MVC view:-
<img class="thumbnailimag" src="~/Content/uploads/#item.ID.ToString()" + ".png" />
but I am unable to concatenate the .png to my href & src . can anyone advice please ?
Thanks
You'll want to wrap the code in parentheses, as explained here. No need to call .ToString() then:
href="~/Content/uploads/#(item.ID).png"
Your quotes are not closed properly.
href='#string.Format("~/Content/uploads/{0}.png", item.ID)'
Complete Code
<a href='#string.Format("~/Content/uploads/{0}.png", item.ID)'><img class="thumbnailimag" src='#string.Format("~/Content/uploads/{0}.png", item.ID)' /></a>
Alternatively, declare fileName outside of the href (IMO makes it more readable)
#{
var fileName = item.ID.ToString() + ".png";
}
<img class="thumbnailimag" src="~/Content/uploads/#fileName" />

Insert html in the output of smarty mailto function

I know how to use the smarty mailto function to create mailto anchor links with encoding. But I am wondering if it is possible for example to insert html image tags [<img>] into the output of this function.
I have tried:
[SMARTY]
{$text = '<img src="/images/qr_code.jpg" alt="member sign up qr code">'}
{mailto address="test#example.com" encode="hex" text={$text}}
[HTML RESULT]
<a href="mailto:%74%65%73%74#%65%78%61%6d%70%6c%65.%63%6f%6d">
<img src="/images/qr_code.jpg"
alt="member sign up qr code" >
</a>
I am after this output rather:
<a href="mailto:%74%65%73%74#%65%78%61%6d%70%6c%65.%63%6f%6d">
<img src="/images/qr_code.jpg"
alt="member sign up qr code">
</a>
It seems, from reading this code https://bitbucket.org/pferor/dbless/src/04b228943e39/dbless/lib/smarty/plugins/function.mailto.php, that when you use the "hex" encoding it not only encodes the address but also the text (line 147):
$text_encode = '';
for ($x=0; $x < strlen($text); $x++) {
$text_encode .= '&#x' . bin2hex($text[$x]).';';
}
Not sure if that's the problem though.
If you don't mind editing the Smarty source youmight be able to change this line (153):
return '<a href="'.$mailto.$address_encode.'" '.$extra.'>'.$text_encode.'</a>';
To this:
return '<a href="'.$mailto.$address_encode.'" '.$extra.'>'.$text.'</a>';
To make it work.
If you try "none" encoding does it show the image then?