How can I use HTML symbols like arrows in javascript? - Stack Overflow

admin管理员组

文章数量:1334697

I have a script that generates a list of <form> tags with multiple inputs and buttons inside. I want to use an arrow (↑) on a button but when I write

buttonUp.value="↑";

it doesn't work.
Instead of showing ↑, the button shows the raw code on the page. How can I make the arrow display on the button?

I have a script that generates a list of <form> tags with multiple inputs and buttons inside. I want to use an arrow (↑) on a button but when I write

buttonUp.value="↑";

it doesn't work.
Instead of showing ↑, the button shows the raw code on the page. How can I make the arrow display on the button?

• javascript
• html

Share Improve this question Follow edited Feb 4, 2016 at 8:09 Mr Lister 46.6k1515 gold badges113113 silver badges155155 bronze badges asked Jan 30, 2016 at 20:42 RobertRobert 84111 gold badge77 silver badges66 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Use a Unicode escape sequence.

buttonUp.value = "\u2191";

I don't remend you do this with JavaScript (for newbies like me it's harder). It's very easy, using only html.

Example:

<input type="submit" value="&#x2191; HELLO" style="border-radius:50px;" />
<button>&#x2191; HELLO</button>

If you still want to use js, the reply from guest271314 is working.

Here is the list of symbols on HTML(click)

PS. I also remend you use Font Awesome , very nice icons.

Make sure to tell me if worked for you.

I know this doesn't answer your question but I hope this will be useful for newbies

Use button element, which has .innerHTML property

document.querySelector("button").innerHTML = "↑"

<button></button>

alternatively, use the actual "upwards arrow" or "up arrow" character

document.querySelector("input[type=button]").value = "↑";

<input type="button" value="" />

There is a problem with your solution code--it will only escape the first occurrence of each special character. For example:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

Here is code that works properly:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

also u can use below code

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

本文标签： How can I use HTML symbols like arrows in javascriptStack Overflow