The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> 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
pandy
post Jan 9 2021, 04:28 AM
Post #2


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I don't follow your console.log examples. But you have one fatal error. The entity in question should be written like so
CODE
&divide;

with a trailing semicolon. Seems some browsers mend that mistake. But JS won't.

Then I think you need to split things up because you don't only need to replace but also print what you've replaced back. I'm not used to console.log and can't get anything to work, but if we do it like this...

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('B', 'C');
   document.getElementById('target').innerHTML = replacestring;
}


That works, right? The reason I replaced B with C rather than what you wanted is I can't get it to work either! It seems innerHTML returns the actual character, the interpreted entity.


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


So that explains why the above doesn't work. Problem is using the the character, ÷, in the replace doesn't work either! Neither does it work to type the character ÷ in the HTML, but this could maybe be a character encoding problem since I used a non unicode editor and I don't have time to test with unidode right now. But you can. Let me know how it goes.

I just had time to google a little and found nothing, but there must be some trick to this. I think entities need to be 'decoded' somehow, but I didn't find any straightforward way to do this.

I think I leave this to Christian. Or maybe Darin. I'm off for a refreshing walk in the snow. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 9 2021, 09:18 AM
Post #3


.
********

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

It seems innerHTML returns the actual character, the interpreted entity.

Korpela says "client-side JavaScript operates on the DOM, where entities do not exist" in this thread: https://stackoverflow.com/questions/1874959...s-in-javascript

The thread also suggests workarounds, but none very simple. It might be easier with server-side scripting (e.g. PHP). unsure.gif






User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 09:24 AM
Post #4


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I saw that thread, but not that Korpola was there.

DOM or not, the character is returned, so why can't it be replaced? Don't get it. I take it that I didn't succeed wasn't because of lack of unicode...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 09:29 AM
Post #5


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
It's worse. Look at this.

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


CODE

function doIt()
{
   var currentstring = document.getElementById('target').innerHTML;
   alert(currentstring);
   var replacestring = currentstring.replace('&amp;', '/');
   document.getElementById('target').innerHTML = replacestring;
}


Now the entity is ruturned! But the replacement still doesn't work. WTF? wacko.gif

Needless to say, replacing with & doesn't work either.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 9 2021, 02:34 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Even worse:

CODE
<p onclick="alert(this.innerHTML);">&divide; &amp;</p>

What's the difference between the two entities? (The first entity is rendered, but not the second.)

This post has been edited by Christian J: Jan 9 2021, 02:53 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 02:37 PM
Post #7


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You tell me! wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 02:42 PM
Post #8


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(pandy @ Jan 9 2021, 08:37 PM) *

You tell me! wacko.gif



And look at this! Just some random ones from a library I have in my editor.
CODE

<p onclick="alert(this.innerHTML);">&larr; &#8212; &#160; &#8216; &#8230; &#177;</p>


&#160; turns inte &nbsp; ! laugh.gif


Attached image(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 02:52 PM
Post #9


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
That was k-mel. Edge, IE and FF do the same thing. That's something, at least. tongue.gif

FYI &nbsp; is treated the same as the numeric entity. It's not interpreted. So ampersand and non-breaking space entities are different. And probably a few more. Jesus christ.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 9 2021, 02:56 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Could it have something to do with ASCII or Unicode ranges? I don't know anything about that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 02:58 PM
Post #11


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
But for example &larr; has been around as long as I have. Must be ascii?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 03:06 PM
Post #12


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The whole first column form here https://htmlhelp.com/reference/html40/entities/latin1.html . Only &nbsp; stands out.

Attached Image


https://htmlhelp.com/reference/html40/entities/symbols.html are all interpreted.

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2021, 03:23 PM
Post #13


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Among these I found two more that aren't interpreted.
https://htmlhelp.com/reference/html40/entities/special.html

Attached Image

& <, and > are used in HTML itself (if URLs are included). But &nbsp;? I thought I was on to something for a while, but it doesn't add up.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post Jan 9 2021, 04:07 PM
Post #14


Novice
**

Group: Members
Posts: 24
Joined: 7-November 20
From: Saint Louis, MO
Member No.: 27,623
Pandy, your example seems to work here ha.

Also, I was able to replace the "&divide;" using String.fromCharCode (see below)

CODE
currentString.replace(String.fromCharCode(247), '/');


These threads were actually very helpful for me. Thank you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post Jan 9 2021, 04:26 PM
Post #15


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 #16


.
********

Group: WDG Moderators
Posts: 9,656
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 #17


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

Group: WDG Moderators
Posts: 20,730
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
pandy
post Jan 10 2021, 05:04 AM
Post #18


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I demand to get a gold star after my name! cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2021, 05:11 AM
Post #19


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

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

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?


But it can! Jesus, I'm stupid sometime - and you too that didn't see my mistake. tongue.gif

& needs to be escaped of course! Then it works without splitting the entity string.

CODE
function doIt()
{
   var currentstring = document.getElementById('target').innerHTML;
   var replacestring = currentstring.replace('\&amp;', 'and');
   document.getElementById('target').innerHTML = replacestring;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2021, 05:12 AM
Post #20


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Still want my gold star. angry.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

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

 

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

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

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