Display path with backslash (javascript) - javascript

I try to display a path on an simple javascript alert command :
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
</head>
<body>
<div onClick=myFunction('D:\user\myself\dos')>
clic here
</div>
<SCRIPT LANGUAGE = "JAVASCRIPT">
function myFunction(p) {
alert(p);
}
</SCRIPT>
But it does not display the backslash..
I suppose I should replace all "\" by "\" but I don't find a way to do it.
(I tried p = p.replace(/\\/g, '\\\\'); and a lot of other syntaxes but none of those worked.
Do you have any idea of how to deal with that ?
EDIT :
The path comes out from a function and I can't edit it directly in "onClick"

The backslash '\' itself is used as the escape character.
So add one more backslash before every backslash you are going to display.
In case if you cannot modify url try to add new attribute and access that attribute within onClick handler.
Try working snippet below:
function myFunction(elem) {
alert(elem.getAttribute('data-url'));
}
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
</head>
<body>
<div data-url="D:\user\myself\dos" onClick=myFunction(this)>
clic here
</div>
Update: Code snippet updated to allow displaying url without modifying string.

You just need to call your function with double the backslashes to escape the escape character:
myFunction('D:\\user\\myself\\dos')
Will this work in your case?

Related

Backslash escape not working in HTML attributes

I tried below code for checking whether backslashes in HTML attribute value makes the character next to it escape:
<button id="b1" onclick="$('body').append('<button onclick=alert(\'something\');>')">test</button>
Here, if backslash works, then when we click over #b1 , a new button should have appended to and when we click over that new button, a new alert should have popped up. But it didn't. This means backslash escape won't work in HTML attributes.
Is it correct?
Then how do I escape things ?
When I tried opening that webpage with view-source: prefix, I saw code like below one:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Hi there!
</title>
<meta name="viewport" content="width=device-width">
<script src="jQuery.js"></script>
<style>
.red{color: red;}
</style>
</head>
<body>
<button id="b1" onclick="$('body').append('<button onclick=alert(+AFw'something+AFw');>test</button>')">
test
</button>
<script src="question.js"></script>
</body>
</html>
Here, backslashes are replaced to +AFW. Is it wrong ?
Also, if I try changing the onclick attribute value to doIt(); and add below code into question.js file, it works perfectly:
function doIt(){
alert("<button onclick=\"alert('hi');\"> ");
}
But as the question says, we have to find out why backslash escape not working in HTML attribute values. Also, I wants to define what will happen when button clicked, right in the attribute.
Thanks in advance for giving informations.....
Seems working. Here's the runnable script/example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" onclick="$('body').append('<button onclick=alert(\'something\');>test</button>')">test</button>

unicode chars give "unterminated string literal" in js

This error is generated when my HTML has some weird characters seen as a whitespace.
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<p>Some
 Text</p>
</body>
</html>
Note that there is a character between Some and Text, but it is not seen here. I need to pass this to a function toJson(), but it returns an error saying unterminated string literal.
Everything just works fine when I use a simple text instead of this like:
Some<space>Text works fine.
I've tried all the str_replace function which I found while searching for the same -
1) var re = /(?![\x00-\x7F]|[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3})./g;
params.body_html = html.replace(re, '');
angular.toJson(params); // gives error
2) params.body_html.replace(/\uFFFD/g, '');
angular.toJson(params); // gives error
I don't know what character is this(may be unicode). When I copy this to a emacs file, it is seen as �򠠨.
Note: You see this character as a red dot when you edit this question and click on edit the snippet for the above html.
Any hints/ideas of how I can make this work ?
Got this working with:
params.body_html = params.body_html.replace(/\u2028/g, '');
angular.toJson(params); //works fine.
Thanks to #Gothdo for providing the character link.
But the problem is it'll only replace if html has only this particular unicode char. Is there any function with which all unicode characters gets replaced or trimmed ?

Delete whole anchor tag in contenteditable div on one keypress

I have following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="edit" contenteditable>
This is link that is editable.
</div>
</body>
</html>
What I'm trying to do is a very simple text editor where you can put in links (they would get turned into html via JS) but when you hit backspace in the back or delete in front of them, I want it to disappear at once (not deleting anchor text letter by letter).
How would one go about it? My steps with Javascript would be sth like this:
When pressing Backspace key, detect if </a> is before the cursor, if so run regex on the section before cursor, pick a first match and replace it with blank space.
The opposite, detect if Delete key is pressed, check if <a ... > is in front of it and remove it as well.
I'm just not quite sure how to put this in code and also if I can run regex and have it recognize the text in contenteditable area. I'd like to avoid any heavy external libraries because the text editor will not really do much more besides this.
If anybody wants to fork my Codepen here it is.
Thanks for any advice.
There is a clean way to solve this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="edit" contenteditable>
This is link that is editable.
</div>
</body>
</html>
Adding a contenteditable="false" will register the anchor as a whole and not letter by letter.
If you've already got the method down to pass in the string and re-assign the value of the contenteditable section, here's an example of how to structure the regex.
var textblock = document.getElementById('edit')
function testContent(deletetype) { // deletetype == "delete" || "backspace"
var txt = textblock.innerHTML.toString().trim(),
rgxstring = "<a[^<]+<\\/a>",
rgx
if (deletetype == "delete") {
rgxstring = "^" + rgxstring
} else {
rgxstring += "$"
}
rgx = new RegExp(rgxstring, "i")
console.log(txt, txt.match(rgx))
textblock.innerHTML = txt.replace(rgx, "")
}
testContent("backspace")
<div id="edit" contenteditable>
This is link
</div>

Why can't I get this entity code to display correctly in a browser?

I'm trying to code a UK Pound symbol to be written to a document by JavaScript, but it's code is not being translated and is instead displayed as entered.
See this JSBin http://jsbin.com/orocox/1/edit
This is the JavaScript:
$("#price").text('£ 1.99');
This is the html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<span id="price"></span>
</body>
</html>
This is the result:
'&pound(;) 1.99'
*Note that the parenthesis around the ';' are added by me to prevent the entity code from being translated on StackOverflow, but they do not exist in the actual output.
The result I want is:
'£ 1.99'.
use unicode instead: jsbin
$("#price").text('\u00A3 1.99');
explanation: the £ is an html entity and is not processed as normal text. but unicode works for any text. since you are using text it is processed as a string not an html.
check this page's encoding reference : here
Try $("#price").html('£ 1.99'); instead.
Use the character itself:
$("#price").text('£ 1.99');
This is good for the readability of your code. How you type “£” depends on your editing environment. E.g., on Windows, you can produce it by typing Alt 0163 if you cannot find any more convenient way (depending on keyboard, keyboard layout, and editor being used).

jQuery - .length() counts special chars as 2?

I have this problem when i use $('#id').val().length; it returns 2 when I use characters like æ, ø and å.
Can someone tell me why and how I can get it to work like ( one ) char?
I suspect something else is going on here and it is not an issue of encoding.
I refuse to believe this is a jQuery issue (see http://jsfiddle.net/KLzYf/ for my jsutification).
The following raw HTML will report back "1":
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<html>
<body>
<input type="text" value="æ" id="test"/>
</body>
<script type="text/javascript">
alert(document.getElementById("test").value.length);
</script>
</html>
I'd be interested to see some of the HTML/other code. And to have a few tests, for instance, what do the following give you
alert("æ".length); //=1?
alert('"' + $('#id').val() + '"'); //are there any spaces/other chars?
Also, if you view-source on the HTML, what do the contents of your input look like.
try this:
http://jsfiddle.net/Innuendo108/GXwGG/
There are 2 characters and it says length=2
I think you used extra space either or any one side of that character.
<p id="t">æ</p>
$('#t').text().length
This work properly.

Categories

Resources