Announcement

Collapse
No announcement yet.

Frage zu JavaScript-Regex zur erkennung von Rechenoperationsausdrücken.

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Frage zu JavaScript-Regex zur erkennung von Rechenoperationsausdrücken.

    Mein Ziel ist es, Strings, die Rechenoperationen darstellen, zu valisiderne, d. h. Strings wie '1+1' oder '2.5x7'.

    Mit dem Regex re will ich wiederum Rechenoperationen erkennen, bei denen links des mathematischen Zeichens und rechts davon eine Ganzzahl steht, also so wie z. B. 2+8.

    Der Ausdruck '21+11' dürfte doch mit dem Regex re als valide erkannt werden, er match-t jedoch nicht. Wie kann das sein?

    Code:
      var re = /\s*[0-9]+[\+-x\/][0-9]+[\D\s]+/; //Wenn es nur Ganzzahlen sind, d. h.
  //Null oder mehrere Leerzeichen gefolgt von mindestens einer Zahl gefolgt von einem mathematischen Operator gefolgt von mindestens einer Zahl, die vor einem Nichtzahlenzeichen od. Leerzeichen steht.

  var exp = '21+11';

 if(exp.match(re)){
    alert('Valide');

 }
    Ich habe den Fehler leider nicht erkannt.
    Tags: None
  • #2
    die vor einem Nichtzahlenzeichen od. Leerzeichen steht
    Da dieses nicht kommt aber vorhanden sein soll, wird es dann auch nicht matchen.
    [\D\s]*
    könnte matchen
    Christian

    Comment

    • #3
      Ich habe das nun auf eine andere Weise zu lösen versucht.

      var re = /\b([0-9]+[\+-x\/][0-9]+)\b/g;
      Dennoch funktioniert das nicht. Der Regex soll ja arithmetische Operationen erkennen. Tut es auch bei 1+2 oder 2-1... dennoch gibt var re = /\b([0-9]+[\+-x\/][0-9]+)\b/g; bei dem String '123' NICHT null zurück :\

      Es ist für eine Taschenrechnerapplikation in JavaScript (welche noch keine Dezimalen hat, die kommen später). Was ich ebenfalls noch nicht verstehe, ist wieso ich den Inhalt der Textarea nicht vermittels des del-Buttons mit folgendem Code löschen kann:

      [QUOTE]if($(this).attr('id') == "del"){ newText=''; $(".txt").val(newText); }[QUOTE]

      - Beim Regex verstehe ich nicht, wieso er nicht null zurückgibt, wenn er einen String prüft, der kein +, -, x oder / enthält.

      - Bei dem String, mit dem ich die Textarea löschen will, verstehe ich nicht, wieso er nix löscht.

      Der Quellcode der Applikation ist wie folgt:

      Code:
      <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="windows-1252">
        <title></title>
        <script src="jquery-3.4.1.js"></script>
        <style type="text/css">
            .btn {
                width: 50px;
                height: 50px;
                margin: 3px;
            }
        </style>
    </head>
    <body bgcolor="orange">
        <textarea class="txt" rows="1" cols="30"></textarea>
        <table>
            <tr>
                <th><button type="button" class="btn">0</button></th>
                <th><button type="button" class="btn">1</button></th>
                <th><button type="button" class="btn">2</button></th>
                <th><button type="button" class="btn">3</button></th>
            </tr>
            <tr>
                <td><button type="button" class="btn">4</button></td>
                <td><button type="button" class="btn">5</button></td>
                <td><button type="button" class="btn">6</button></td>
                <th><button type="button" class="btn">7</button></th>
            </tr>
            <tr>
                <td><button type="button" class="btn">8</button></td>
                <td><button type="button" class="btn">9</button></td>
                <td><button type="button" class="btn" id="del">del</button></td>
                <td><button type="button" class="btn" id="result">=</button></td>
            </tr>
            <tr>
                <td><button type="button" class="btn">+</button></td>
                <td><button type="button" class="btn">-</button></td>
                <td><button type="button" class="btn">x</button></td>
                <td><button type="button" class="btn">/</button></td>
            </tr>

        </table>

        <script>
          //Sinn dieser Funktion: Sobald eine arithmetische Operation im Textfeld steht, soll berechnet werden.
          //Diese Funktion soll prüfen, ob eine arithmetische Operation vorliegt.
            $.fn.isExperssion = function (expr) {

                //Wieso gibt er bei der Zeichenkette '123' bei folgendem Regex nicht null zurück?
                var re = /\b([0-9]+[\+-x\/][0-9]+)\b/g;
                return expr.match(re);

            };

            //So soll das Ergebnis, das ausgegeben wird, berechnet werden.
            $.fn.ergebnis = function (expr) {

                var res;

                if (expr.includes("+")) {
                    var a = parseFloat(expr.split("+")[0]);
                    var b = parseFloat(expr.split("+")[1]);
                    res = a + b;
                }

                if (expr.includes("-")) {
                    var a = parseFloat(expr.split("-")[0]);
                    var b = parseFloat(expr.split("-")[1]);
                    res = a - b;
                }

                if (expr.includes("x")) {
                    var a = parseFloat(expr.split("x")[0]);
                    var b = parseFloat(expr.split("x")[1]);
                    res = a * b;
                }

                if (expr.includes("/")) {
                    var a = parseFloat(expr.split("/")[0]);
                    var b = parseFloat(expr.split("/")[1]);
                    res = a / b;
                }

                return res;

            };

            //Hier geht jQuery los.
            $(document).ready(function () {

                $("button").click(function () {
                    var oldText = $(".txt").val();
                    var newText = $(this).text();

                    //Wenn del gedrückt wird, soll '' in die Textarea gesetzt werden, funktioniert aber nicht.
                    if($(this).attr('id') == "del"){ newText=''; $(".txt").val(newText); }  //Wieso geht das nicht????

                    //Wenn jemand "=" drückt, wird die Funktion ergebnis aufgerufen.
                    if ($(this).attr('id') == "result") {

                        var text = $(".txt").val();
                        //Wenn es eine wohlgeformte arithmetische Op handelt, Ergebnis durch gleichnamige Funktion berechnen.
                        if (!($(this).isExperssion(oldText + newText) === null)) {

                            var res = $(this).ergebnis(text);

                            $(".txt").val(res);
                        }

                    } else {
                 //Ansonsten soll immer ein Zwischenergebnis berechnet werden, wenn ein wohlgeformter arithmet. Ausdruck in der Textarea stet.
                        if ($(this).isExperssion(oldText + newText) === null) {

                            $(".txt").val(oldText + newText);
                        } else {
                            var res = $(this).ergebnis(oldText + newText);
                            $(".txt").val(res);
                        }
                    }
                });

                //Zwischenergebnis soll auch berechnet werden, wenn jemand Zahlen über die Tasta eingibt.
                $(".txt").keyup(function () {

                    var content = $(".txt").val();

                    if (($(this).isExperssion(content) === null) == false) {
                        var res = $(this).ergebnis($(".txt").val());
                        $(".txt").val(res);
                    }

                });
            });

        </script>

    </body>
</html>

      Comment

      • #4
        Es sit der falsch Weg, mathematische Eingaben mit einer RegEx zu verarbeiten. Diese müssen geparst werden. Sonst kommst du nicht weit. Siehe math. Parser.
        Auch ist ein Taschenrechner keine "Anfängeranwendung"

        Deinen Ausdruck verstehe ich nicht. Warum Klammern, warum Wortgrenze, wenn es keine Buchstaben gibt.

        [0-9]+[\+-\\*\\/][0-9]+

        Erwartet 2 Zahlen und dazwischen /*-+

        Klammer würde ich dann alles einzeln, damit man dann schon auf die Elemente zugreifen kann

        ([0-9])+([\+-\\*\\/])([0-9])+
        Zuletzt editiert von Christian Marquardt; 11.10.2019, 09:56.
        Christian

        Comment

        • #5
          [0-9]+[\+-\\*\\/][0-9]+

          Erwartet 2 Zahlen und dazwischen /*-+
          Genau das ist mein Plan - sobald zwei Zahlen vorhanden sind, zwischen denen ein Operator steht, soll das Zwischenergebnis sogleich in die Textarea gesetzt werden, nur ist es so, dass auch 123 als valide erkannt wurd, obwohl da zwischen den Zahlen kein Operator steht. 12 wiederum erkennt er nicht als valide; irgendwie stehe ich vor einem Rätsel.

          Comment

          • #6
            Das
            [0-9]+[-\\+\\*\\/][0-9]+
            solle mit 123 nicht matchen
            thttps://www.regexplanet.com/share/in...re=yyyyddd49ar
            Christian

            Comment

            • #7
              Genau das ist der Fall, auch wenn ich es bereits etwas weniger elegant gelöst hatte. Nun zum zu berechnenden mathematischen Term. Der mathematische Term, der zu berechnen ist, wird als Funktionsargument in die Funktion „ergebnis“ übergeben.


              Wenn der Term mit – anfängt, dann soll ein Term wie -1+3 wie folgt berechnet werden:


              Code:
              //...wenn der Term mit - beginnt, dann:

if (expr.includes("+")) {

var a = parseFloat(expr.substring(1,).split("+")[0]);

var b = parseFloat(expr.substring(1,).split("+")[1]);

res=b-a;

}
              Wenn ich b-a durch einen Alert ausgebe, also alert(b-a); dann kommt 2. ABER das Ergebnis, welches die Funktion $.fn.ergebnis liefert, wenn sie aufgerufen wird, ist immer NaN. Ich stehe da wirklich vor einem Rätsel. Der Reproduzierbarkeit halber poste ich hier noch erneut meinen ganzen Quellcode:


              Code:
              <!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

<head>

<meta charset="windows-1252">

<title></title>

<script src="jquery-3.4.1.js"></script>

<style type="text/css">

.txt{

resize: none;

}

.btn {

width: 50px;

height: 50px;

margin: 3px;

}

.box {

float: left;

padding: 5px;

}

#del {

width: 100px;

height: 50px;

margin: 3px;

}

#fliesstext{

margin-top: 10px !important;

font-size: 20px;

color:black !important;

text-shadow: none !important;

}

p{

margin-top: 100px;

font-size: 40px;

color:blue;

text-shadow: 10px 11px 12px white;

}




</style>

</head>

<body bgcolor="orange">

<div class="box">

<textarea autofocus class="txt" rows="1" cols="30"></textarea>

<table>

<tr>

<th><button type="button" class="btn">0</button></th>

<th><button type="button" class="btn">1</button></th>

<th><button type="button" class="btn">2</button></th>

<th><button type="button" class="btn">3</button></th>

</tr>

<tr>

<td><button type="button" class="btn">4</button></td>

<td><button type="button" class="btn">5</button></td>

<td><button type="button" class="btn">6</button></td>

<th><button type="button" class="btn">7</button></th>

</tr>

<tr>

<td><button type="button" class="btn">8</button></td>

<td><button type="button" class="btn">9</button></td>

<td><button type="button" class="btn">.</button></td>

<td><button type="button" class="btn" id="result">=</button></td>

</tr>

<tr>

<td><button type="button" class="btn">+</button></td>

<td><button type="button" class="btn">-</button></td>

<td><button type="button" class="btn">x</button></td>

<td><button type="button" class="btn">/</button></td>

</tr>

</table>




<button align="left" type="button" class="btn" id="del">del</button>

</div>




<div class="box">

<p>Rechner</p>

<p id="fliesstext">Ein einfacher Taschenrechner.</p>

</div>







<script>

//TODO: NaN bei - beseitigen... und Dezimalen, Potenz, Wurzel einbauen.




$.fn.isNumber = function (content) {

if (!content.endsWith('+') && content.includes('+')) {

return false;

}

if (!content.endsWith('-') && content.includes('-')) {

return false;

}

if (!content.endsWith('x') && content.includes('x')) {

return false;

}

if (!content.endsWith('/') && content.includes('/')) {

return false;

}




return true;




};




//Sinn dieser Funktion: Sobald eine arithmetische Operation im Textfeld steht, soll berechnet werden.

//Diese Funktion soll prüfen, ob eine arithmetische Operation vorliegt.

$.fn.isExperssion = function (expr) {




//Wieso gibt er bei der Zeichenkette '123' bei folgendem Regex nicht null zurück?

var re = /\b([0-9]+[\+-x\/][0-9]+)\b/g;







return expr.match(re);




};




//So soll das Ergebnis, das ausgegeben wird, berechnet werden.

$.fn.ergebnis = function (expr) {




var res;




if(!expr.startsWith('-')){




if (expr.includes("+")) {

var a = parseFloat(expr.split("+")[0]);

var b = parseFloat(expr.split("+")[1]);

res = a + b;

}




if (expr.includes("-")) {

var a = parseFloat(expr.split("-")[0]);

var b = parseFloat(expr.split("-")[1]);

res = a - b;



}




if (expr.includes("x")) {

var a = parseFloat(expr.split("x")[0]);

var b = parseFloat(expr.split("x")[1]);

res = a * b;

}




if (expr.includes("/")) {

var a = parseFloat(expr.split("/")[0]);

var b = parseFloat(expr.split("/")[1]);

res = a / b;

}

}else {

if (expr.includes("+")) {

var a = parseFloat(expr.substring(1,).split("+")[0]);

var b = parseFloat(expr.substring(1,).split("+")[1]);

//alert(b-a);

res=b-a;





}




if (expr.includes("-")) {

var a = parseFloat(expr.split("-")[1]);

a=parseFloat("-"+a);

//alert(a);

var b = parseFloat(expr.split("-")[2]);

res = a - b;



}




if (expr.includes("x")) {

var a = parseFloat(expr.split("x")[0]);

var b = parseFloat(expr.split("x")[1]);

res = a * b;

}




if (expr.includes("/")) {

var a = parseFloat(expr.split("/")[0]);

var b = parseFloat(expr.split("/")[1]);

res = a / b;

}



}



return res;




};




//Hier geht jQuery los.

$(document).ready(function () {




$("button").click(function () {

var oldText = $(".txt").val();

var newText = $(this).text();




//Wenn del gedrückt wird, soll '' in die Textarea gesetzt werden, funktioniert aber nicht.

if ($(this).attr('id') == "del") {

newText = '';

document.getElementsByClassName('txt')[0].value='';

return;

}




//Wenn jemand "=" drückt, wird die Funktion ergebnis aufgerufen.

if ($(this).attr('id') == "result") {




var text = $(".txt").val();

//Wenn es eine wohlgeformte arithmetische Op handelt, Ergebnis durch gleichnamige Funktion berechnen.

//if (!($(this).isExperssion(oldText + newText) === null)) {




var res = $(this).ergebnis(text);



$(".txt").val(res);

//}




} else {

//Ansonsten soll immer ein Zwischenergebnis berechnet werden, wenn ein wohlgeformter arithmet. Ausdruck in der Textarea stet.

var oldAndNew = oldText + newText;




if ($(this).isNumber(oldAndNew)) {

$(".txt").val(oldAndNew);

} else {




if ($(this).isExperssion(oldAndNew) === null) {




$(".txt").val(oldAndNew);




} else {




var res = $(this).ergebnis(oldAndNew);

$(".txt").val(res);




}

}

}

});




//Zwischenergebnis soll auch berechnet werden, wenn jemand Zahlen über die Tasta eingibt.

$(".txt").keyup(function () {




var content = $(".txt").val();



if (($(this).isExperssion(content) === null) == false) {




if ($(this).isNumber(content) === false) {



var res = $(this).ergebnis($(".txt").val());



$(".txt").val(res);



}

}




});

});




</script>




</body>

</html>

              Comment

              Previous template Next
              Working...
              X