can't get unicode character to display properly - Javascript and HTML - javascript

I'd like to put a unicode up arrow in an html input button that is being generated in Javascript.
These are the codes for the up arrow from unicode-table.com:
Unicode number: U+2191
HTML-code: & #8593; (space between the & and # so you can see the code and not the arrow)
I do have
<charset="utf-8" />
in my head tag in the html file.
I've tried every variation of those two codes I can think of within the <> below and all I get in the browser is the text of the codes I've tried.
Here's the line of code:
upButton.setAttribute("value", "<up arrow code here>");

try this string instead of an html escape character (this is a JavaScript string after all, not an html text node) \u2191'

To escape any symbol in JavaScript, use this tool: http://mothereff.in/js-escapes#1%E2%86%91 For your example, '↑' becomes '\u2191'.
To escape any symbol in HTML, use this tool: http://mothereff.in/html-entities#%E2%86%91 For your example, ↑ becomes ↑ or ↑.

Try using this in your html: &uparrow;

Related

Remove script elements from html string converting query string to symbol

I am using this solution here to remove script elements from ajax responses. However, when my response looks like this :
'console.log("test");https://x.ya.com/home?abc=1&currency=EUR'
It converts the &curren to ¤ symbol.
The result looks like this:
'https://x.ya.com/home?abc=1¤cy=EUR'
How do I avoid this?
Try using the escaped ampersand & to represent the character & in the HTML where this problem occurs, like so;
HTML
Example Link
Produces
Example Link
I used the approach as mentioned in the answer here. This removes all the script elements from the text without treating it as html (without creating a div and appending the text to innerHTML of the div), which solves the case.
No html = no html symbol decode.
Works for me!

How to detect wrapped plain text and apply html markup using jquery?

The function of the jquery code I currently have is to detect text enclosed with parenthesis and it will serve as a text anchor to a link.
The problem is that parenthesis appears on the text anchor too. Is it possible to show only the text? Also if it's possible to change the parenthesis() into brackets []. thanks in advance.
$("body").html($("#wrapper").html().replace(/(\([^)]+\))/, "<a href='https://www.sample-url-here.com/'>$1</a>"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">text (link here)</div>
The outcome I need should be:
from text [link here] to text link here
What about this? (jsfiddle)
$("body").html($("#wrapper").html().replace(/\(([^)]+)\)/, "[<a href='https://www.sample-url-here.com/'>$1</a>]"));
This will output a link surrounded by square brackets, with only the link underlined.
The problem with you original regular expression was that it was looking for anything not parentheses, surrounded by anything that is parenthesis, and that whole expression was surrounded by capturing parentheses.
In other words, let's look at it like this:
(x)
We'll call those your capturing parentheses. x can later be selected with $1.
x = \([^)]+\)
See the problem? Your entire x was being captured.
EDIT
jsfiddle updated to not show brackets.
EDIT
How about this one? jsfiddle

Mustache.js allow only line breaks, escape other HTML

I am creating comments from user input and rendering them using Mustache.js after a user clicks 'submit'. I realize I can replace user input line breaks (\n) with <br/> to render as HTML breaks, such as
myString.replace(/\n/g, '<br />');
and I realize I can make Mustache not escape HTML by using triple brackets
{{{myString}}}
However, I would like to escape all user HTML as Mustache would typically do with double braces {{ ... }}, with the exception of allowing line breaks with <br/>
What is the best way to do this? I can replace the line breaks after it has been rendered, but that seems like a very inefficient solution, and I'm thinking there has to be a better way.
Option 1 - Use a pre tag:
It's actually best (or efficient) that you wrap text in a <pre></pre> tag, which will preserve the white space in the text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
And enable word-wrap
How do I wrap text in a pre tag?
- http://jsfiddle.net/X5ZY7/
Option 2 - Split your string into lines, and use a mustache each:
comment = userComment.split("\n")
{{#comment}}
{{comment}}<br/>
{{/comment}}
Option 3 - Manually escape your string using your favorite method before injecting the tags:
var div = document.createElement("div")
div.textContent = comment
comment = div.innerHTML.replace(/\n/g, "<br/>")
{{{comment}}}
If you're looking to add line breaks to a textarea you need to replace \n with

Removing html line breaks using Javascript

I'm trying to grab an element's HTML using jQuery and then post it to the server. I successfully grabbed it, but I am not able to remove the white space between the tags and the line breaks that are rendered by default. The HTML code grabbed is shown below:
<table><tbody><tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr>
<tr><th>2nd row</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
I would like to trim the spaces between the tags only. I've used this regular expression: str.replace(/\s+/g, ' ');. But that doesn't seem to work, any suggestions?
Currently, you are replacing all consecutive sequences of whitespace with a single space.
This is what you want:
str.replace(/>\s+</g, '><');
I need to add escape character(backslash - ) character at the end of each line to wrap the string.

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