Replacing HTML special symbols

HTML code: <p id="arrow">This arrow is &#11167;</p> Shows up as:

This arrow is ⮟

Want to replace &#11167 with &#1165. Should show up as:

This arrow is ⮝

Thought I could use jQuery/JavaScript:

temp = $("#arrow").html();
temp = temp.replace(/&#11167/g,/&#11165/g);
$("#arrow").html(temp);

But does not seem to work.
Appreciate any help!
Thanks.

Hi there henryder,

when using javascript, you need to work with the
actual rendered characters rather than their code.

Here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled d</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1,h2 {
    font-size: 1.25em;
    text-decoration: underline;
 }
#arrow,#arrow1 {
    display: inline-block;
    padding:0.5em;
    border:1px solid #999;
    background-color: #fff;
    box-shadow: 0.2em 0.2em 0.2em rgba( 0, 0, 0, 0.3 );
    font-size: 2em;
    color: #009;
    cursor: pointer;
 }
#arrow1::after {
    content: '\1167';
 }
#arrow1:hover::after,
#arrow1:active::after,
#arrow1:focus::after {
    content: '\1165';
}
</style>

</head>
<body> 

 <h1>Javascript "click"</h1>

 <p id="arrow">This arrow is &#x1167;</p>

 <h2>CSS "hover,active, focus"</h2>

 <p id="arrow1" tabindex="1">This arrow is</p>

<script>
( function( d ) {
  'use strict';
   var test = true,
       arrow = d.getElementById( 'arrow' );
       arrow.addEventListener( 'click', 
          function() {
             if ( test === true ){
               arrow.textContent = 
               arrow.textContent.replace( 'ᅧ', 'ᅥ' );
               test = false;
               }
              else {
               arrow.textContent = 
               arrow.textContent.replace( 'ᅥ', 'ᅧ' );
               test = true;
               }
             },);
 }( document ));
</script>  

</body>
</html>

coothead

Thanks coothead! How do I get the rendered symbol into my code editor for the “replace( ‘⮝’, ‘⮟’ )” code? I thought I could cut and paste the symbol from the browser into my editor (NetBeans), but the pasted object just appears as an empty square, NOT the symbol ⮝ or ⮟? Can I use the symbol code somehow instead? u+02b9f (unicode) 025637 (octal) 11167 (decimal) 0x2B9F (hex) &#11167 (html)?

Your “arrows” looked like ᅥ ᅧ, rather than like mine…?

Hi there henryder,

unfortunately, from your post, I do not
know what your "arrows" look like. :unhappy:

So, to show you the method to use, I used something else. :winky:

Note

I C&P’d the rendered symbols into the javascript code.

coothead

OK. Odd that your and my symbols render perfectly on my browsers (chrome & IE), but perhaps not on yours…! Thanks for your help anyhow!

Hi there henryder,

If you can see it and I can’t, then I must assume
that you are using a “special” font.

coothead

It helps to provide a complete sample. Also, see String - JavaScript | MDN. I don’t see the syntax \&. JavaScript is very different from HTML. The following works for me. Note that I do things differently from most but I assume you can convert this to do it your way.

<input type="button" value="click" onclick="clicked()"/>
<p id="arrow">This arrow is &#11167;</p> 

function clicked() {
temp = arrow.innerHTML;
temp = temp.replace('\u2B9F','\u2B9D');
arrow.innerHTML = temp;
}

The two characters look like a vertical bar | except with one or two horizontal bars going to the left. Like:

BarsNotArrows

Hi there SamuelCalifornia,

What point are trying to make?

coothead

You said you did not know what the characters look like for others. I explained what they look like to me and even provided an image showing what I see.

I was actually referring to the characters that
@henryder indicated in his original post…

…which were these…

&#11167 with &#1165.

…not those that I posted in my example code and
looked like this…

ᅧ  snd  ᅥ

coothead

Alternative suggestion:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> HTML5 Test Page </title>
</head>
<body>
<input type="button" value="click" onclick="clicked()"/>
<p id="arrow">This arrow is &#11167</p> 

<script>
function clicked() {
  let arr = [...arrow.innerHTML];
  if (arr.includes('\u2B9F')) { arr[arr.length-1] = '\u2B9D' }
                         else { arr[arr.length-1] = '\u2B9F' }
  arrow.innerHTML = arr.join('');
}

</script>
</body>
</html>

And here is another possibility.

Script:

function clicked() {
	arrowspan.innerHTML = arrowspan.innerHTML == '\u2B9D' ? '\u2B9F' : '\u2B9D';
}

HTML:

<input type="button" value="click" onclick="clicked()"/>
<p id="arrow">This arrow is <span id="arrowspan">&#11167;</span></p> 

Note the use of the Conditional (ternary) operator. It originated in the C language and exists in derivative languages including Java and C#.

It is recommended that we should no longer code in this manner. :eek:

Further reading :-

Inline event handlers — don’t use these

coothead

Agreed, but I was only using code from earlier post.
Easy fix.
Following code incorporates last two alternative examples.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> HTML5 Test Page </title>
</head>
<body>
<input type="button" id="btn1" value="click" />
<p id="arrow">This arrow is &#11167</p> 

<input type="button" id="btn2" value="click2" />
<p id="arrow2">This arrow is <span id="arrowspan">&#11167;</span></p> 

<script>
function clicked() {
  let d = document.getElementById('arrow');
  let arr = [... d.innerHTML];
  if (arr.includes('\u2B9F')) { arr[arr.length-1] = '\u2B9D' }
                         else { arr[arr.length-1] = '\u2B9F' }
  d.innerHTML = arr.join('');
}

function clicked2() {
  let d = document.getElementById('arrowspan');
  d.innerHTML = d.innerHTML == '\u2B9D' ? '\u2B9F' : '\u2B9D';
}

function init() {
  document.getElementById('btn1').addEventListener('click', clicked);
  document.getElementById('btn2').addEventListener('click', clicked2);
} init();

</script>
</body>
</html>

Hi there jmrker,

I have edited my post to reflect your assertion. :winky:

coothead

Just going crazy now on the day before April Fool’s
A third example on how the problem could be solved.
Probably many more available :smile:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> HTML5 Test Page </title>
<style>
 #btn3 { display: none; }
 #lbl3 { font-size: 1.5em; background-color: red; }
</style>
</head>
<body>
<input type="button" id="btn1" value="click" />
<span id="arrow">This arrow is &#11167</span><p> 

<p><input type="button" id="btn2" value="click2" />
This arrow is <span id="arrowspan">&#11167;</span></p> 

This arrow is <input type="checkbox" id="btn3">
              <label for="btn3" id="lbl3">&#11167;</label>

<script>
function clicked() {
  let d = document.getElementById('arrow');
  let arr = [... d.innerHTML];
  if (arr.includes('\u2B9F')) { arr[arr.length-1] = '\u2B9D' }
                         else { arr[arr.length-1] = '\u2B9F' }
  d.innerHTML = arr.join('');
}

function clicked2() {
  let d = document.getElementById('arrowspan');
  d.innerHTML = d.innerHTML == '\u2B9D' ? '\u2B9F' : '\u2B9D';
}

function clicked3() {
  let btn3 = document.getElementById('btn3'),
      lbl3 = document.getElementById('lbl3'),
      mark;
  if (btn3.checked) { mark = '\u2B9D'; } else { mark = '\u2B9F'; }
  lbl3.innerHTML = mark;
}

function init() {
  document.getElementById('btn1').addEventListener('click', clicked);
  document.getElementById('btn2').addEventListener('click', clicked2);
  document.getElementById('btn3').addEventListener('click', clicked3);
} init();

</script>
</body>
</html>

One more using CSS content::after

... <style> section
 .btn4dn::after { content: '\2B9F'; }
 .btn4up::after { content: '\2B9D'; }

... <body> section
<p id="btn4" class="btn4dn" >This arrow is </p>  <!-- &#11167; //-->

... <script> section
function clicked4() {
  let btn4 = document.getElementById('btn4');
  if (btn4.classList.contains('btn4dn')) { btn4.classList.toggle('btn4up'); }
}

function init() {
  document.getElementById('btn1').addEventListener('click', clicked);
  document.getElementById('btn2').addEventListener('click', clicked2);
  document.getElementById('btn3').addEventListener('click', clicked3);
  document.getElementById('btn4').addEventListener('click', clicked4);
} init();

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.