Is it possible convert text to regex? - regex

Question

As example i have this text
1.2345
12.345
So my input form must following the format above. Is it possible to populate regex dynamically. as example we will use format number 1
User input 12.345 so it will return false, but when user input 5.5555 it will return true, but when user input 1.23 it will return true and the number will become 1.2300
In javascript, i'm doing this
var inputVal = $(this).val();
if (inputVal == "") return;
if (inputVal.indexOf('.') !== -1) {
var inputValSplitdot = inputVal.split(".");
var inputFormatSplitDot = inputFormat.split(".");
if (inputValSplitdot[1].length < inputFormatSplitDot[1].length) {
var compareResult = inputFormatSplitDot[1].length - inputValSplitdot[1].length
var zeroItem = "0".repeat(compareResult);
$(this).val(inputVal + zeroItem);
}
} else {
$(this).val(inputVal + ".").change();
}
How can i achive in flutter/dart ? thanks in advance

Answer 1

This problem can be solved elegantly in Flutter.
First, use RegEx in InputFormatter to make sure users can only enter digits (0-9) and decimal points (.) but not any other characters
inputFormatters: [
// Make sure user can only enter numbers and decimal points
FilteringTextInputFormatter.allow(RegExp(r'[0-9\.]')),
],
Secondly, limit the total input length to 6, so users cannot enter more than that:
maxLength: 6
(Once this is done, Flutter automatically adds a counter, if you don't want the counter, it can be disabled easily by setting counterText: ''.)
Lastly, monitor the input with a TextEditingController, and check if the value entered is valid and within range:
bool isValid(String input) {
if (input.isEmpty) return true; // initial empty string is okay
final number = double.tryParse(input); // try to parse the string
if (number == null) return false; // parse failed: invalid format
if (number >= 100) return false; // range failed: larger than 99.999
return true;
}
Full source code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("TextField Demo")),
body: Center(
child: SizedBox(
width: 200,
child: VerifiedTextField(),
),
),
);
}
}
class VerifiedTextField extends StatefulWidget {
#override
_VerifiedTextFieldState createState() => _VerifiedTextFieldState();
}
class _VerifiedTextFieldState extends State<VerifiedTextField> {
final _controller = TextEditingController();
bool _valid = true;
#override
void initState() {
_controller.addListener(() {
final valid = isValid(_controller.text);
setState(() => _valid = valid);
});
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return TextField(
controller: _controller,
inputFormatters: [
// Make sure user can only enter numbers and decimal points
FilteringTextInputFormatter.allow(RegExp(r'[0-9\.]')),
],
maxLength: 6,
decoration: InputDecoration(
errorText: _valid ? null : "Incorrect Format",
// counterText: '', // apply this code, if you don't want a counter
),
);
}
bool isValid(String input) {
if (input.isEmpty) return true; // initial empty string is okay
final number = double.tryParse(input); // try to parse the string
if (number == null) return false; // parse failed: invalid format
if (number >= 100) return false; // range failed: larger than 99.999
return true;
}
}
And of course, if you prefer to do it the way you had in JS, you can modify the isValid function accordingly.

Answer 2

If you are working with string then this might be helpful.
There are two ways to construct a regular expression in JavaScript .
Using a regular expression literal, which consists of a pattern enclosed between slashes, as follows.
const reg = /ab+/;
Calling the constructor function of the RegExp object, as follows.
const reg = new RegExp('ab+', flag);

Answer 3

You can try something like this:
First, check if the number provided accomplished the regex expression
bool isMatch(String value) {
var hasMatch = !RegExp("^\d\.\d+").hasMatch(value);
if (hasMatch && value.length < 6) newText(value);
return hasMatch;
}
Secondly, modify the number length if necessary
void newText(String value) {
for (var i = value.length; i < 6; i++) {
value += '0';
}
}

Answer 4

This is how I do it in javascript
// returns true if pattern matches text
function checkPattern(pattern, input) {
return (input.match(pattern)) ? true : false
}
// regex pattern
let pattern = /[0-9]{1}[.][0-9]{4}/g
let pattern2 = /[0-9]{2}[.][0-9]{3}/g
let input = ["1.2345", "12.345", "5.5555", "1.23"]
for (let i in input) {
console.log(`checking first pattern on input: ${input[i]} ${checkPattern(pattern, input[i])}`)
console.log(`checking second pattern on input: ${input[i]} ${checkPattern(pattern2, input[i])}`)
}
the output is
checking first pattern on input: 1.2345 true
checking second pattern on input: 1.2345 false
checking first pattern on input: 12.345 false
checking second pattern on input: 12.345 true
checking first pattern on input: 5.5555 true
checking second pattern on input: 5.5555 false
checking first pattern on input: 1.23 false
checking second pattern on input: 1.23 false