JS| Zeichenabfrage

dUser

Mitglied
Guten Abend Miteinander,

und zwar habe ich momentan eine Denkblockade, und habe keinerlei gescheite Idee das Problem zu lösen.
Meine Gesamtidee: Eine Aufzählung verschiedener Zeichen, welche in eine Textarea geschrieben werden.

HTML:
<!DOCTYPE HTML>
<html>
    <head>
    <meta charset = "UTF-8" />
        <script type = "text/javascript" language = "javascript">
    var symbole_I;
    function checkLetters(){
      var text = window.document.getElementsByTagName("textarea")[0].value;
      var symboles = "!§$%&/()=?*<;:-<,.-#+|~}][{@€";
      //if (text.indexOf(symboles))
      window.document.getElementById("allLetters").innerHTML = text.length;
      window.document.getElementById("allSymboles").innerHTML = symbole_I;
      window.setTimeout("checkLetters()", 100);
    }
        </script>
        <style type = "text/css">
        body{
            text-align: center;
            font-family: arial;
        }
        </style>
    </head>
        <body onload = "checkLetters()">
    <h1>Buchstabenzähler</h1>
        <textarea rows = "10" cols = "80" style = "font-family: arial; font-weight: bold; resize:vertical"></textarea>
    <br />
    Gesamte Anzahl: <p id = "allLetters" style = "font-size: 10px; font-weight: bold;">0</p>
    <br />
    Symbol Anzahl: <p id = "allSymboles" style = "font-size: 10px; font-weight: bold;">0</p>
        </body>
</html>

Die normale Gesamtausgabe funktioniert. Jedoch scheitert es bei mir, den Inhalt des ersten Strings (String von der Textarea) mit dem Inhalt des Symbol-Strings zu vergleichen. (z.B ob im Textarea-String z.b ein "!,/,$" etc. ist)


Vielleicht kann mir ja jemand helfen.

Mit freundlichen Grüßen

-Jack001
 
Besser als den Check zyklisch durchzuführen wäre IMO, einen Eventlistener z. B. auf keyup zu definieren.
Dein eigentliches Problem würde ich so lösen:
Javascript:
                  var text = "ß042´ßzpüwhü90hu54/()=?*/()=?*";
                  var symboles = "!§$%&/()=?*<;:-<,.-#+|~}][{@€";
                  var symbolsContained = "",
                      found = false;
                  for (var i = 0; i < symboles.length; i++) {
                      if (text.indexOf(symboles[i]) != -1) {
                          found = true;
                          symbolsContained += text[i];
                      }
                  }
                  console.log(symbolsContained, symbolsContained.length);
 
Zuletzt bearbeitet:
Danke für deine Antwort.

Ich verstehe deinen Lösungsweg, jedoch kommt bei mir was komisches raus.

Habe bei der textarea auf onkeyup gewechselt.
Bei mir werden in der Console folgendes bei einem "Hello!"+(Leerzeichen).
errror1mg25snuxt.png

=> 0 (Consolenzeile 1) beim normalen schreiben
=> H1 (Consolenzeile 2) nach dem Leerzeichen.

(Momentaner Code)
HTML:
<!DOCTYPE HTML>
<html>
    <head>
    <meta charset = "UTF-8" />
        <script type = "text/javascript" language = "javascript">
    var symbole = 0;
    var symbolsContained = "";
    function checkLetters(){
      var text = window.document.getElementsByTagName("textarea")[0].value;
      var symboles = "!§$%&/()=?*<;:-<,.-#+|~}][{@€";           
      for (var i = 0; i < symboles.length; i++) {
        if (text.indexOf(symboles[i]) != -1) {
          symbolsContained += text[i];
        }
      }
      console.log(symbolsContained, symbolsContained.length);
      window.document.getElementById("allLetters").innerHTML = text.length;
      window.document.getElementById("allSymboles").innerHTML = symbolsContained.length;
    }
        </script>
        <style type = "text/css">
        body{
            text-align: center;
            font-family: arial;
        }
        </style>
    </head>
        <body>
    <h1>Buchstabenzähler</h1>
        <textarea rows = "10" cols = "80" style = "font-family: arial; font-weight: bold; resize:vertical" onkeyup = "checkLetters()"></textarea>
    <br />
    Gesamte Anzahl: <p id = "allLetters" style = "font-size: 10px; font-weight: bold;">0</p>
    <br />
    Symbol Anzahl: <p id = "allSymboles" style = "font-size: 10px; font-weight: bold;">0</p>
        </body>
</html>

Mit freundlichen Grüßen

-Jack001
 
Zuletzt bearbeitet:
Oh, ich hatte es doch getestet, aber da scheinen noch zwei Fehler drin zu sein. So funktioniert es besser:
Code:
            var text = "ß042´ßzpüwhü90hu54/()=?*/()=?*";
            var symboles = "!§$%&/()=?*<;:-<,.-#+|~}][{@€";
            var symbolsContained = "", found = false;
            for (var i = 0; i < symboles.length; i++) {
                if (text.indexOf(symboles[i]) != -1) {
                    found = true;
                    symbolsContained += symboles[i];
                }
            }
            console.log(symbolsContained, symbolsContained.length);
Allerdings noch nicht perfekt: Unter dem Index 1 wird ein Sonderzeichen erkannt, das nicht im String sichtbar ist (A mit einem : darüber) und das € wird nicht richtig verarbeitet. Muss sich um ein Problem mit der Zeichenkodierung handeln. Vielleicht kann das jemand anders mit erweiterten Kenntnissen lösen. Wenn nicht, solltest Du mal bei Stackoverflow nachfragen.
 
Danke sehr :)

Ich werde mir den Code mal ganz genau anschauen, vielleicht finde ich ja noch einen Weg zum weiterentwickeln.

Mit freundlichen Grüßen

-Jack001
 
@Sempervivum

Das von dir gepostete Script funktioniert soweit ich es beurteilen kann sehr gut.
Jedoch zählt er bei doppelte Angabe ( 2x "!") nur eines mit.
Sprich es steht "!!" aber er zählt nur einmal. Kann man da vll. noch was machen ?

Mit freundlichen Grüßen

-Jack001
 
Hm, in der letzten Version sollte es mehrfache auch mehrfach zählen. Ich hatte anfangs eine etwas andere Version gepostet, bei der das mehrfache Zählen unterdrückt wird und es dann geändert. Überprüf doch mal, ob Du die letzte Version aus meinem Post #4 (und natürlich die Korrektur in #6) hast.
 
Hallo.

Ich habe mir mal etwas überlegt, und zwar habe ich den Code jetzt so geschrieben:
Javascript:
var symboles_L = 0;
    function checkLetters(){  
      var text = window.document.getElementsByTagName("textarea")[0].value;
      //var symboles = "!§$%&/()=?*<;:-<,.-#+|~}][{@€";
      var symboles = "!§$";
      for(var s = 0; s <= symboles.length-1; s++){
        if (text.indexOf(symboles.charAt(s)) >= 0){
          //console.log("Symbol gefunden!")
          symboles_L++;
        }
          else{
            //console.log("Symbol nicht gefunden!")
          }
      }    
      window.document.getElementById("allLetters").innerHTML = text.length;
      window.document.getElementById("allSymboles").innerHTML = symboles_L;
    }

... Dieser Code funktioniert wunderbar. Soweit ich es beurteilen kann, könnte ich dieses Script auch nutzen, dabei besteht nur ein Problem:

Wenn ich das onkeydown oder onkeyup Event nutze, wird die funktion mehrmals aufgerufen. Wenn ich das über das onclick Event (Button) mache, funktioniert es problemlos. (Einmal aufgerufen)
Kann ich vielleicht diesbezüglich was optimieren, das es trotz onkeydown nur einmal aktualisiert wird ?

Mit freundlichen Grüßen

-Jack001
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück