wenn aus 😯 was undefiniertes �� wird

1. Einleitung

   
   

   Inhalt

   • Einleitung
   • Probleme mit Unicode-Zeichen
   • ...
   • Auswahl von Unicodezeichen hier in diesem Forum
   • Bsp: ein paar Gruppen
   
   

2. Probleme mit Unicode-Zeichen

   
   
   hier die ageNT 😎 testet Unicode Zeichen: 😎🚩
   
   https://www.hpm-support.de/t546082f11769...de-Zeichen.html
   https://wiki.selfhtml.org/wiki/JavaScrip...ring/charCodeAt
   https://wiki.selfhtml.org/wiki/JavaScrip...ng/fromCharCode
   https://developer.mozilla.org/en-US/docs...ring/charCodeAt
   
   
   ein neuer Versuch mit Patch fürs Forum, passend für V4 und V6 gibt's hier wenn aus 😯 was undefiniertes �� wird ...
   
   
   
   
   

3. ...

   
   
   

4. Auswahl von Unicodezeichen hier in diesem Forum

   
   im Untermenue "Farben " der Iconbar habe ich eine Auswahl von Unicodezeichen untergebracht.
   Das Script steckt in einem HTML-Baustein.
   
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
    

   
   <div class="fc_3 xob_icon_cont">!_UniCode_?</div>
   <script>
   (function() {
   // console.log("UniCode 15.5. ");
   let qs="div.fc_3";
   let dv=document.querySelector(qs);
   let uniCodeNam="uniCode";
   let uc_lst0=[129320,128512,128526,128558,128549,128565,129298,129301,129325,128519];
    
   var create_uc_span = function(nd,uc_lst){
   			for (var uc of uc_lst) {
   				let sp=document.createElement("span");
   				sp.style="padding:0.3em; cursor:pointer;font-size:1.5em";
   				let s=l2b.i2c(uc); // String.fromCharCode
   				sp.appendChild(document.createTextNode(s));
   				sp.onclick=function(){
   				//	l2b.msg_insert("[size=3]"+this.innerText+"[/size]");
   					l2b.msg_insert(this.innerText);
   					}
   				nd.parentNode.insertBefore(sp,nd);
   				} // uc
   		}
    
   if (!dv) alert("UniCode - no querySelector: "+qs);
   for (var tt2 of "!_neue_UniCode;Unicode Zeichen speichern".split(",")) {
   		let nd=dv.cloneNode(true);
   		let tt=tt2.split(";");
   		nd.innerText=tt[0].charAt(0)=="!" ? tt[0]: ("["+tt[0]+"]");
   		if (tt[1]) nd.title=tt[1];
   		dv.parentNode.insertBefore(nd,dv);
   		if ( tt[0].indexOf("neue_UniC")>0) {
   			let uniC_lst=l2b.loc.get2(uniCodeNam,uc_lst0);
    
   			create_uc_span(nd,uniC_lst);
   			nd.onclick=function() {
   				let s=prompt("neue Icons abspeichern: \n\noder '---' delete all\n",l2b.i2c(0x1F9E8));
   				if (s=="---") {
   					l2b.loc.remove(uniCodeNam);
   				}else if (s) {
   					let lst=[];
   					let high,low,i=0;
   					while( i < s.length){
   						let c=s.charCodeAt(i);
   						if (0xD800 <= c  && c  <= 0xDBFF) {
      					  hi = c;
       					low = s.charCodeAt(i + 1);
       					if (isNaN(low)) {
        						 throw 'High surrogate not followed by ' +
          					 'low surrogate in  "onclick convert2entity()"';
       							}
       					i++;
   							c=((hi - 0xD800) * 0x400) +  (low - 0xDC00) + 0x10000;
   							lst.push(c);
   							}
   							i++;
   						}  // while
   					// prompt("noch nicht fertig\n",lst.join(" "));
   					if (confirm("neu speichern? \n ")+lst.join(" ")) {
   						let uniC_lst=l2b.loc.get2(uniCodeNam,uc_lst0);
   					  for (let l of lst) {
   							let i=uniC_lst.indexOf(l);
   							if (i >=0 ) uniC_lst.splice(i, 1);
   							}
   						l2b.loc.set2(uniCodeNam,lst.concat(uniC_lst));
   						create_uc_span(nd,lst);					
   						}
   					}	
   				} // click
   			let i70=document.getElementById("xob_icon_70");
   			if (i70) i70.title=i70.title.replace("Farben","Farben & Unicode-Icons ");
    
   			} // uniC
    
   		} // tt
   	dv.onclick=function(){
   		alert("Hilfe \n'!_neue_UniCode' erwartet als Eingabe Tastatur-Smileys "
   +"\nunter Windows: Windowtaste + '.' \n"
   +"die Liste der Smileys wird im localStore gespeichert.\n "
   +"\n oder '---' zum loeschen der Liste");
   		}
   	})();
    
   
   document.addEventListener('DOMContentLoaded', function(){
   // 
   }); // domcontent
   </script>
    
    

   
   
   

5. Bsp: ein paar Gruppen

   
   
   Smileys: 😀😁😂🤣😃😄😅😆😉😊😋😎😍😘🥰😗😙😚
   ☺🙂🤗🤩🤔🤨😐😑😶🙄😏😣😥😮🤐😯😪😫🥱😴😌😛😜
   😝🤤😒😓😔😕🙃🤑😲☹🙁😖😞😟😤😢😭😦😧😨😩🤯😬
   😰😱🥵🥶😳🤪😵🥴😠😷🤒🤕🤢🤮🤧😇🥳🥺🤠🤥🤫🤭🧐🤓.
   
   Würfel: 🎲...
   
   Wetter: ☁⛅⛈🌤🌥🌦🌧🌨🌩🌪🌫
   
   Mondphasen: 🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜☀🌞⭐🌟🌈
   
   Landesflagen: 🇩🇪 🇬🇲 🇺🇦🏴‍☠️

hier https://www.hpm-support.de/t546082f11769...de-Zeichen.html hatte ich schon mal gezeigt,
was die Ursache für diese Zeichen �� ist.

Im javascript unterstützt die Methode String.charCodeAt() erstmal nur UTF-16 Zeichen und erst mittels einiger mathmatischer Operationen kann man alle UTF-8 Zeichen bearbeiten.

Mittlerweile wird eine neue Methode String.codePointAt() von allen Browsern unterstützt, die die Handhabung von UTF-8 Zeichen einfacher und eleganter macht.

// https://wiki.selfhtml.org/wiki/JavaScrip...ring/charCodeAt
// https://wiki.selfhtml.org/wiki/JavaScrip...ng/fromCharCode
// https://developer.mozilla.org/en-US/docs...ring/charCodeAt

// https://wiki.selfhtml.org/wiki/JavaScrip...ing/codePointAt
// https://wiki.selfhtml.org/wiki/JavaScrip...g/fromCodePoint
// https://developer.mozilla.org/en-US/docs...ing/codePointAt
// https://developer.mozilla.org/en-US/docs...g/fromCodePoint

<script>
document.addEventListener('DOMContentLoaded', function(){
 
	convert2entity = function (utf8_string) {	
 
		let html_entity="";
		for (const item of utf8_string) {
			if (item.codePointAt(0) > 127) {
				html_entity += "&#" + item.codePointAt(0) + ";";
			} else {
				html_entity += item;
			}
		}
		return html_entity;	
	}
 

	window.setTimeout(function(){
 
		if (typeof (xobor) == 'object' && xobor.mbt) 
  	xobor.mbt.convert2entity = function(utf8_string) {
 
			var html_entity;
 
			if (typeof(utf8_string) =="string") {
				html_entity = convert2entity(utf8_string)
			} else {
				html_entity = JSON.parse( convert2entity( JSON.stringify(utf8_string)))
			}
		
			return html_entity;
		}
	},400); // Timeout
 
}); // domcontent
</script>