How do I prevent a child string from ending the parent string? - javascript

Description:
I have a very simple button that I want to call a javascript function when clicked. Everything works fine with the function and the button with the exception of one issue that I can't seem to overcome.
The Javascript function copies a string in to the clipboard to be easily pasted for the user. The string is pulled in from another area that is free text for the user to put in what ever they want. However, if the user adds a double quote, it escapes the parent string.
Example:
Example of working code button:
<button id="Demo" onclick="copytoclipboard('some text to copy goes here')">Copy to Clipboard</button>
Example of when the button will not work:
<button id="Demo" onclick="copytoclipboard('some "text" to copy goes here')">Copy to Clipboard</button>
As you may be able to see, the first double quotation mark is ending the parent string.
What I have tried:
So far I have tried escaping the double quote but this doesn't appear to work due to the fact that it is a child string.
Example:
<button id="Demo" onclick="copytoclipboard('some \"text\" to copy goes here')">Copy to Clipboard</button>
Back to the question:
How do I prevent any double quotes in the child string the ending the parent string that is in turn preventing my onclick function to run?

This breaks down to: you're looking to escape data (doesn't matter whether plain text or javascript) in an XML (or more specifically HTML) attribute value.
You'll find plenty of info about that - in this case the easiest way is to escape the doublequote char (") via "
<button onclick="alert("foobar");">Click me</button>

The way that you tried escaping the double quote was almost perfect but you need to do it like this:
<button id="Demo" onclick='copytoclipboard("some \"text\" to copy goes here")'>Copy to Clipboard</button>
You can learn more about escaping special characters in here.

Related

Setting a button value to contain an ampersand coded character via JavaScript

I'm trying to set a button value to be « (or ») via JavaScript with the following code:
document.getElementById('hideButton').value='«';
This just sets the button text to « rather than «.
The HTML markup works fine (i.e. <input type="button" value="«">) giving the double left arrow quote on the button face.
Is there some special way of escaping the ampersand code in JavaScript?
Thanks,
FM
here just convert to UTF it should work.
document.getElementById('hideButton').value='\u00AB';
document.getElementById('otherButton').value='\u00BB';
here a link to convert special text
couldn't you just do this?
document.getElementById("hideButton").value = "«";
Sorry I would have just commented, but haven't got enough rep yet.
Alternatively, use the unicode \u00AB
http://jsfiddle.net/s53FH/
you could use the -element instead
<button id="hideButton"> </button>
<script>
document.getElementById('hideButton').innerHTML='«';
</script>
http://jsfiddle.net/6m3zz/

javascript replace single quote with double single quote issue

I have used below syntzx to replace single quote with double single quote issue
str.replace(/'/g,"''");
but it's replace everytime when it load page. like
I have text
" Test's and test's page and test's event"
then first time ,it will be
" Test''s and test''s page and test''s event"
then again
" Test'''s and test'''s page and test'''s event"
then next loading
" Test''''s and test''''s page and test''''s event"
can you please help to get just single to double single quote only?
If it's safe to assume that there won't be three or more quotes in a row, try this:
str.replace(/'+/g,"''")
If the assumption is not safe, and you just want to replace "a quote by itself" with two quotes, leaving multi-quotes alone, try this:
str.replace(/''?('*)/g,"''$1");
That being said, you might want to look into why it's replacing more than once in the first place ;)

Why doesn't my javascript onclick work with div?

I am trying to turn a <div> into a link to local HTML document (./lilo/index.html) using JavaScript.
HTML
<div class="pagelist_item" onClick="goto("./lilo")">
<h4>Test Button</h4>
<h6>Discription</h6>
</div>
JavaScript
function goto(url){
window.location = url;
alert(url);
}
See http://jsfiddle.net/6HHTd/
But when I click the button, nothing happens.
Why does this not work?
Your quotes are incorrect in this line:
<div class="pagelist_item" onClick="goto("./lilo")">
jsfiddle even shows the error in red text.
Using apostrophes makes it easier to fix:
<div class="pagelist_item" onClick="goto('./lilo')">
To clarify, in "hi "there" you" the second double-quote matches with the first, closing the string and causing an error with the rest of the expression. Escaping the quotes with back-slashes works "hi \"there\" you" but embedding apostrophes (single-quotes) within double-quotes is often easier. (JavaScript is happy to use either single or double-quotes to delimit strings.)
Also rename your function from goto, as it is a reserved keyword.
Use jquery as follows
$('.pagelist_item').click(function(){
window.location="./lilo";
});
Fiddle

How do I make the whitespace behaviour in a <textarea> and a HTML preview match?

I have a <textarea> element. When the user fills it, you can see the spaces they made and when they pressed Enter to jump to the next line.
This is great, but when I see the HTML output, the result differs. It is an endless sentence without line breaks.
Using only HTML or JavaScript, how can I fix this?
You probably want something like:
<p style="white-space: pre-wrap"></p>
<p style="white-space: pre"></p>
<pre></pre>
pre-wrap:
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
pre:
Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
If you are just taking what is entered in a textarea and outputing it as html, you would see this. For starters, you could replace all spaces with and all newlines with <br>. Or put the output in <pre> tags. (In either case, you will also want to replace some other characters with entities too.)

Passing apostrophe to javascript function

I am not finding a solution on this one using JavaScript (to utilize localStorage) in a JSP.
Trying to pass something with apostrophe. I have done a .replaceAll() and replaced the ' with ' and it still passes it as an '.
I have also tried a .split("'") and replaced the apostrophe with:
(\' , ' , \', '' , ''' and '\'')
All of these just pass an apostrophe to the function (what I see when I hover over the link) like this:
Save job
With a and b being the two split substrings but with no effect. I do notice that spaces are converted into %20, but that's little comfort. Any other ideas?
Your JSP code is irrelevant. Decide what HTML you want to produce and produce it.
The following are all valid HTML markup:
<a href="saveJob('Bob\'s Question')"> …
<a href="saveJob("Bob&apos;s Question")"> …
<a href="saveJob('He said "Go Away"')"> …
<a href='saveJob("He said \"Go Away\"")"> …
… and the following are invalid:
<a href="saveJob('Bob's Question')"> <!-- JS string ends early -->
<a href="saveJob("Bob's Question")"> <!-- HTML attribute ends early -->
<a href="saveJob('Bob&apos;s Question')"> <!-- JS string ends early -->
<a href="saveJob('He said "Go Away"')"> <!-- HTML attribute ends early -->
You cannot use your HTML attribute delimiter in your attribute value except as an HTML entity. You cannot use your JavaScript string delimiter in your JavaScript string unless you escape it, even if you use an HTML entity to describe it.
In general, you should not be putting JavaScript in your HTML (you should attach event handlers to your markup programmatically, from script), and you especially shouldn't be abusing an HTML anchor as a JavaScript trigger (either use an HTML anchor to a valid URL and let JavaScript hijack the link if enabled, or use a <button> or other element to invoke script-only side effects).
As you've noticed, such manual string escape tasks can be quite tricky; covering apostrophes won't even get you all the way: what if there's a newline in the string? That would break the script as well.
I would recommend converting your data to a JSON object, perhaps using JSON-taglib. This should take care of all required escaping for you.
The Phrogz solution
<a href="saveJob("Bob&apos;s Question")">
works fine if you have only apostrophes in your text.
If your text contains both apostrophes and quotes, you can use a hidden div (div with style='display:none;') for the text, pass the id of the div to saveJob instead of passing the text itself, and get the text inside saveJob by using
document.getElementById(myId).innerHTML

Categories