Accessing individual characters in string

@LeezinhoMar 06.2017

I want to display a string of characters, looking like a word, but I want to be able to single out any one of them to display in a different color, such as blue.
The string is assembled by a process that concatenates one character at a time.
Also I want to be able to hover the mouse on a blue character and bring up a pop-up message that explains why it’s blue.
Any advice?

to post a comment

JavaScript

21 Comments(s) _↴

@SempervivumMar 06.2017 — #I want to be able to single out any one of them to display in a different color, such as blue.[/QUOTE]AFAIK there is no other way than placing each character inside of a span and set the color for each.
The string is assembled by a process that concatenates one character at a time.[/QUOTE]Then it should be easy to create these span tags automatically.
I want to be able to hover the mouse on a blue character and bring up a pop-up message that explains why it's blue.[/QUOTE]Google for "css tooltip" and I'm shure you will find a proper solution, e. g. here:

http://www.cssportal.com/css-tooltip-generator/

@rootMar 06.2017 — #I wonder if you are looking for something like https://css-tricks.com/sentence-length-colorization/ as you are not entirely clear on this point nor did you give an example of what you were looking for.

@LeezinhoauthorMar 07.2017 — #I'm not dealing with sentence-length colorization, nor even word-length, but rather just one or two characters in a word.

What I might not have made clear is that the blue tinting of this or that letter is not something I can edit directly in HTML,

but instead it's controlled by events in the JavaScript program.

Specifically, I'm dealing with phonetics.

I need to color some letters and give them tooltip descriptors for more precision than is offered by the phonetic alphabet.

As a hypothetical example, let's say I want to display a word that contains a t-sound that is [I]retroflex[/I]

(with tongue curled back, as heard in some languages of India).

The letter "t" should be displayed in blue, as a signal to the user to touch it with the mouse

for a message on how it differs from the default t-sound—in this case, the word "retroflex".

Let's leave aside the tooltip question for now and deal with coloring a single letter. How exactly can I use <span> to do that?

Here is my best guess of some code for the purpose, which of course doesn't work.

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script&gt;
 var x = "dho";
 var y = "t";
 var z = "i";
 var toggle = true;
 
 function blackBlue() 
 {
 if (toggle == true)
 {
 toggle = false;
 [B]y = &lt;span style="color:black"&gt;color &lt;/span&gt;[/B]    <br/>
 }
 else
 {
 toggle = true;
 [B]y = &lt;span style="color:blue"&gt;color &lt;/span&gt;[/B]
 } 
 
 <i>    </i>document.getElementById("theText").innerHTML = x + y + z;
 }
 &lt;/script&gt;
 
 &lt;p id="theText"&gt;dhoti&lt;/p&gt;  // ALL THE SAME COLOR, FOR STARTERS.
 
 &lt;button type="button" onclick="blackBlue()"&gt;Toggle&lt;/button&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@LeezinhoauthorMar 07.2017 — #Correction: I don't see how to edit my post, so here's a replacement for the two bold lines of code:
y = <span style="color:black">t</span>
and
[code]y = <span style="color:blue">t</span>

@rootMar 07.2017 — #Ok, no sentence colourization BUT the principle is the same...

@LeezinhoauthorMar 07.2017 — #Suppose I have a five-letter word ("dhoti") that I need to refer to as the concatenation of five elements of an array called "letter"

(not as "d", "h", etc.).

And suppose I want the fourth letter—letter[3], the "t"—to be blue.

Suppose I try to display it as

document.getElementById("theText").innerHTML = letter[0] + letter[1] + letter[2] + &lt;span style="color:blue"&gt;letter[3]&lt;/span&gt; + letter[4]

...and it fails, what should I do instead?

@LeezinhoauthorMar 07.2017 — #By the way, I have started to try another approach, treating the word as a one-row, several-column HTML table,

with zero border, zero padding, and zero space between cells, one letter in each cell.

How do these two approaches compare, in your expert opinion?

@SempervivumMar 07.2017 — #Regarding post #7:

innerHTML has to be a string. You are missing the aprostropes for the span tag. This is correct:

[CODE]        document.getElementById("theText").innerHTML = letter[0] + letter[1] + letter[2] + '<span style="color:blue">' + letter[3] + '</span>' + letter[4]
 [/CODE]

Regarding post #8:

I do not recommend using a table:
[LIST]

[*]Much too difficult to prepare it and address the characters compared to the other solution.

[*]Breaks the semantics of table as this is provided for real tabular data.

[/LIST]

@KeverMar 07.2017 — #So there is always one word on the page at a time? Each character with the same pronouncation has the same color? So in 'comic' both 'c' would have the same color, in 'mucic' they would have different colors?

Do you want which turn on all characters with the same color/pronouncation? Or do you want buttons which turn all the same characters regardless of their color/pronouncation (all 'the c' in mucic)?

@LeezinhoauthorMar 07.2017 — #Ref. to #9: Apostrophes! It works! I never would have thought of them. Thank you Sempervivum!! (I see that the double-type quotation marks also work, so long as the contained quotation uses the opposite type.)

Ref. to #10: Yes, always no more than one word on the page at a time (for now; but eventually, a short list of words).

If it's the English word "comic", we would use the phonetic symbol /k/ for both "c",

and if "mucic" contains an s-like sound, we'd use /s/ for that. (Slashes indicate phonemes.)

Any character that represents the "default" sound for that character should appear in black.

But if the character represents a "modified" version of the sound, then blue, meaning "hover the mouse for more detail".

I can't explain without getting into technicalities of phonetics. Here goes:

The English words "sick" and "kiss" both have a /k/ phoneme. The one in "kiss" is [I]aspirated[/I] (accompanied by a tiny puff of air),

while in "sick" it is unaspirated, and even "unreleased". Let's say the latter is the default version of /k/.

The /k/ of "kiss" is modified, so I want to mark it in blue. Then when we have [B]mouseover[/B], a tooltip says "aspirated".

Just two colors: black (default) and blue (modified).

@LeezinhoauthorMar 09.2017 — #I'm back. The colorization of individual characters is working perfectly, thanks to your advice!

Now my question is about tooltips where [B]each character[/B] of the word, if blue, is sensitive to show its own tooltip.

At present I concatenate each [B]output character[/B] (in effect, outChar[0] + outChar[1] + outChar[2] +...) into "outString",

and then display "outString" with the following:
document.getElementById("p1").innerHTML = outString;
I suspect I need to do something for the tooltips [B]before[/B] concatenating the characters—but what?

@SempervivumMar 09.2017 — #If I understand you correctly you need to add the tooltip markup for each character that should have a tooltip:

[CODE]outString = outChar[0] + '<a class="tooltips" href="#">' + outChar[1] +
 '<span>Your text for this char</span></a>' + outChar[2] +...[/CODE]

presumed that you like to use the tooltip from the link I posted above.

@LeezinhoauthorMar 11.2017 — #I have my [U]out[/U]put [U]char[/U]acter, "[FONT=Courier New]outChar[/FONT]", correctly tinted blue.

I assign it a new value by sandwiching it between two other expressions, one of them containing "[FONT=Courier New]discrep[/FONT]", the name of the variable that holds the contents of the desired tooltip:
outChar = '<a class="tooltips" href="#">' + outChar + '<span>discrep</span></a>'
What am I missing?

@SempervivumMar 11.2017 — #This code will display the string "discrep". In order to display that variable you need this:
[CODE]outChar = '<a class="tooltips" href="#">' + outChar + '<span>' + discrep + '</span></a>'[/CODE]

@LeezinhoauthorMar 12.2017 — #Thanks again for your suggestion, Sempervivum: it is an improvement.

That line now outputs the [B]value [/B](rather than the name) of the variable "discrep".

It [B]concatenates[/B] the value of "discrep" after that of "outChar".

But rather than being concatenated, I would like "discrep" to be hidden until "mouseover" brings it up in a tooltip.

@SempervivumMar 12.2017 — #Obviously you didn't take over the CSS from the tooltip generator. Do this and it will work.

@LeezinhoauthorMar 12.2017 — #Okay, the code at <http://www.cssportal.com/css-tooltip-generator/> for a tooltip generator is what you see below.

Evidently I need to do something more than sandwich it between [FONT=Courier New]<style media="screen" type="text/css">[/FONT] and [FONT=Courier New]</style>[/FONT]. But what?

a.tooltips {
 position: relative;
 display: inline;
 }
 a.tooltips span {
 position: absolute;
 width:140px;
 color: #FFFFFF;
 background: #000000;
 height: 30px;
 line-height: 30px;
 text-align: center;
 visibility: hidden;
 border-radius: 6px;
 }
 a.tooltips span:after {
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -8px;
 width: 0; height: 0;
 border-top: 8px solid #000000;
 border-right: 8px solid transparent;
 border-left: 8px solid transparent;
 }
 a:hover.tooltips span {
 visibility: visible;
 opacity: 0.8;
 bottom: 30px;
 left: 50%;
 margin-left: -76px;
 z-index: 999;
 }

@SempervivumMar 12.2017 — #Evidently I need to do something more than sandwich it between <style media="screen" type="text/css"> and </style>[/QUOTE]IMO this would be correct and sufficient. If it doesn't work after doing this there must be a different reason. Would be fine if one could view the page online and live. Can you post the URL?

@LeezinhoauthorMar 14.2017 — #Here is the key line of code to turn [FONT=Courier New]outChar[colInd][/FONT] into [FONT=Courier New]outChar[colInd][/FONT] with a tooltip:

outChar[colInd] = '&lt;a class="tooltips" href="#"&gt;' + [COLOR="#0000FF"]outChar[colInd][/COLOR] + '&lt;span&gt;' + discrep[colInd] + '&lt;/span&gt;&lt;/a&gt;'

If I keep the expression shown above in blue—[FONT=Courier New]outChar[colInd][/FONT]—the affected characters are simply omitted, treated as null strings.

If I replace that expression with a literal character such as "X", the characters that need a tooltip appear as blue X's, but they produce the tooltip correctly.

You can see these two scenarios at <mypage.siu.edu/lhartman/stub1.html> and <mypage.siu.edu/lhartman/stub2.html> respectively.

Replace the input word "potato" with a string like "abcdefghi" to see how some letters are affected and others are not (which is a [I]good [/I]thing).

Sempervivum, you have been very patient with this beginner, and I really appreciate it.

@SempervivumMar 14.2017 — #After some struggling I found the error: The CSS for the tooltip make all span elements inside the a element invisible, including the character inside the first span that was inserted for setting the color. Fixing is easy: Apply a class "tt" to the span of the tooltip and limit the CSS to "span.tt":

CSS:

[CODE]<style media="screen" type="text/css">
 a.tooltips {
 position: relative;
 display: inline;
 }
 a.tooltips span.tt {
 position: absolute;
 width:140px;
 color: #FFFFFF;
 background: #000000;
 height: 30px;
 line-height: 30px;
 text-align: center;
 visibility: hidden;
 border-radius: 6px;
 }
 a.tooltips span.tt:after {
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -8px;
 width: 0; height: 0;
 border-top: 8px solid #000000;
 border-right: 8px solid transparent;
 border-left: 8px solid transparent;
 }
 a:hover.tooltips span.tt {
 visibility: visible;
 opacity: 0.8;
 bottom: 30px;
 left: 50%;
 margin-left: -76px;
 z-index: 999;
 }
 </style>[/CODE]

JS:

[CODE]outChar[colInd] = '<a class="tooltips" href="#">' + outChar[colInd] + '<span class="tt">' + discrep[colInd] + '</span></a>'  // from Webdeveloper forum
 [/CODE]

@LeezinhoauthorMar 15.2017 — #Bingo! Sempervivum, I am overwhelmed with gratitude.

This is a big project, and it was virtually shut down until you removed that barrier. Gigathanks!

Also in #JavaScript _↴

Getting error on match unless match (if needed?)Element has no Propeties (but will alert properties)Need help, been away from Javascript for awhile!!

Success!

Help @Leezinho spread the word by sharing this article on Twitter...

Tweet This

Accessing individual characters in string

21 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Accessing individual characters in string

21 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

21 Comments(s) _↴

Also in #JavaScript _↴