The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> string.replace against html symbol code (&divide)?
CharliePrince
post Jan 9 2021, 03:38 AM
Post #1


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623
I'm trying to replace an html symbol code '&divide' with another string.

I can't get this to work. See example below.

CODE
     <body>

         <p id='target'>A &divide B</p>
         <script>
             console.log(`${document.getElementById('target').innerText}`);

             console.log(`${document.getElementById('target').innerText.replaceAll('÷', '/')}  (want this to = 'A / B') `);

             console.log(`${document.getElementById('target').innerText.replaceAll('&divide', '/')}  (or, want this to = 'A / B') `);

         </script>

     </body>



Can anyone help? Pandy?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
CharliePrince
post Jan 9 2021, 04:26 PM
Post #2


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623
I didn't notice your most recent posts here until after my last reply above.

Yes - it's odd to me why some of these are interpreted or rendered literally or as their encoded char or whatever. Crap! I don't know the words to describe but I think you and Christian know what I mean blush.gif

Sorry about the console.logs but . . Look at this (below) . . . if it's of any interest where currentString is broken down to each character

CODE
    console.log(currentString);
    for (i = 0; i < currentString.length; i++) {
        console.log(currentString[i] + ' = ' + currentString.charCodeAt(i));
    }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 9 2021, 08:47 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(CharliePrince @ Jan 9 2021, 10:26 PM) *

I don't know the words to describe but I think you and Christian know what I mean blush.gif

We sure do. I usually reserve this smilie for situations like this: wacko.gif

QUOTE
Sorry about the console.logs but . . Look at this (below) . . . if it's of any interest where currentString is broken down to each character

CODE
    console.log(currentString);
    for (i = 0; i < currentString.length; i++) {
        console.log(currentString[i] + ' = ' + currentString.charCodeAt(i));
    }

I don't understand, will it not just return the charCode for each character in currentString? Except if you feed it

CODE
&amp;

of course, then it will return

CODE
&amp;
& = 38
a = 97
m = 109
p = 112
; = 59

wacko.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2021, 04:25 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
cool.gif cool.gif cool.gif cool.gif cool.gif cool.gif cool.gif

HTML
<p id='target'>A &divide; B</p>

<button onclick="doIt()">Click!</button>



CODE
function doIt()
{
   var currentstring = document.getElementById('target').innerHTML;
   var replacestring = currentstring.replace('\367', '/');
   document.getElementById('target').innerHTML = replacestring;
}



If the entity is one of the not 'interpreted' ones it doesn't work right off, because there javascript seems to see the HTML entity as a string of characters. For ampersand I had to do this or only the literal ampersand would be replaced, not the whole entity.

I find this very confusing, because if it is a sting, why can't it be replaced the normal way?

HTML
<p id='target'>A &amp; B</p>

<button onclick="doIt()">Click!</button>


CODE
function doIt()
{
   var currentstring = document.getElementById('target').innerHTML;
   var entity = '\46' + 'amp;';
   var replacestring = currentstring.replace(entity, 'and');
   document.getElementById('target').innerHTML = replacestring;
}


So it gets hairy anyway. Not for a unique case like with divide, but if you don't know what entities there may be. There could be more 'not interpreted' ones than ones we've found. There must be some documentation for this!

Maybe one could check for & and ; and use different methods accordingly, but those characters could occur otherwise in the text too, so I don't really see how this could work unless a list of not interpreted entities is used...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2021, 03:18 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Jan 10 2021, 10:25 AM) *

cool.gif cool.gif cool.gif cool.gif cool.gif cool.gif cool.gif

HTML
<p id='target'>A &divide; B</p>

<button onclick="doIt()">Click!</button>



CODE
function doIt()
{
   var currentstring = document.getElementById('target').innerHTML;
   var replacestring = currentstring.replace('\367', '/');
   document.getElementById('target').innerHTML = replacestring;
}


Strange, this does not work:

CODE
<p id='target'>A &divide; B</p>
<button onclick="doIt()">Click!</button>

<script type="text/javascript">
function doIt()
{
   var currentstring = document.getElementById('target').innerHTML;
   var replacestring = currentstring.replace('÷', '/'); // Note that I don't use an entity here.
   document.getElementById('target').innerHTML = replacestring;
}
</script>

--why isn't the entity "interpreted" now? Is the replace() method different?unsure.gif


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2021, 03:30 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
QUOTE(Christian J @ Jan 10 2021, 09:18 PM) *


Strange, this does not work:

CODE
<p id='target'>A &divide; B</p>
<button onclick="doIt()">Click!</button>

<script type="text/javascript">
function doIt()
{
   var currentstring = document.getElementById('target').innerHTML;
   var replacestring = currentstring.replace('÷', '/'); // Note that I don't use an entity here.
   document.getElementById('target').innerHTML = replacestring;
}
</script>



We already knew that.

CODE
--why isn't the entity "interpreted" now? Is the replace() method different?:unsure:


And that too. It is interpreted, but it doesn't work to use the actual character for the replace.

Those too things are what was so darn odd!

I was googling html entities and javascript and stumbled on this page. Then I got the idea that maybe if one used the character code JS prefers... And it worked. cool.gif
https://brajeshwar.github.io/entities/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2021, 04:16 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Jan 10 2021, 09:30 PM) *

I was googling html entities and javascript and stumbled on this page. Then I got the idea that maybe if one used the character code JS prefers... And it worked. cool.gif
https://brajeshwar.github.io/entities/

Seems I already had that page bookmarked, we must have been discussing this before.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2021, 04:46 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
Nope. I didn't know about this and I hadn't seen that page. Well, I knew that kind of octal codes could be used in JS, but I didn't know they needed to be used in replace strings.

I may add that I still don't understand why they need to be used... blush.gif

In a case like this the ampersand doesn't need to be escaped. What's the difference?

CODE
  var test = 'this & that';
  alert(test);


Are there other cases when these characters need escaping?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2021, 07:56 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
CSS generated content? Maybe I saw that page when reading this: https://mathiasbynens.be/notes/css-escapes unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2021, 08:10 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
Haven't seen that page either. The only things I've read about CSS escape characters is in the spec and maybe some book, I think. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
CharliePrince   string.replace against html symbol code (&divide)?   Jan 9 2021, 03:38 AM
pandy   I don't follow your console.log examples. But ...   Jan 9 2021, 04:28 AM
Christian J   It seems innerHTML returns the actual character, ...   Jan 9 2021, 09:18 AM
pandy   I saw that thread, but not that Korpola was there....   Jan 9 2021, 09:24 AM
pandy   It's worse. Look at this. <p id='targe...   Jan 9 2021, 09:29 AM
Christian J   Even worse: <p onclick="alert(this.i...   Jan 9 2021, 02:34 PM
pandy   You tell me! :wacko:   Jan 9 2021, 02:37 PM
pandy   You tell me! :wacko: And look at this...   Jan 9 2021, 02:42 PM
pandy   That was k-mel. Edge, IE and FF do the same thing....   Jan 9 2021, 02:52 PM
Christian J   Could it have something to do with ASCII or Unicod...   Jan 9 2021, 02:56 PM
pandy   But for example &larr; has been around as long...   Jan 9 2021, 02:58 PM
pandy   The whole first column form here https://htmlhelp....   Jan 9 2021, 03:06 PM
pandy   Among these I found two more that aren't inter...   Jan 9 2021, 03:23 PM
CharliePrince   Pandy, your example seems to work here ha. Also,...   Jan 9 2021, 04:07 PM
CharliePrince   I didn't notice your most recent posts here un...   Jan 9 2021, 04:26 PM
Christian J   I don't know the words to describe but I thin...   Jan 9 2021, 08:47 PM
pandy   :shades: :shades: :shades: :shades: :shades: ...   Jan 10 2021, 04:25 AM
pandy   I demand to get a gold star after my name! :s...   Jan 10 2021, 05:04 AM
pandy   If the entity is one of the not 'interpreted...   Jan 10 2021, 05:11 AM
pandy   Still want my gold star. :angry2:   Jan 10 2021, 05:12 AM
Christian J   Still want my gold star. :angry2: You can have...   Jan 10 2021, 03:19 PM
Christian J   :shades: :shades: :shades: :shades: :shades: ...   Jan 10 2021, 03:18 PM
pandy   Strange, this does not work: [code]<p id=...   Jan 10 2021, 03:30 PM
Christian J   I was googling html entities and javascript and s...   Jan 10 2021, 04:16 PM
pandy   Nope. I didn't know about this and I hadn...   Jan 10 2021, 04:46 PM
Christian J   CSS generated content? Maybe I saw that page when ...   Jan 10 2021, 07:56 PM
pandy   Haven't seen that page either. The only things...   Jan 10 2021, 08:10 PM

« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th April 2024 - 11:29 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC