JSFiddle - React, Tailwind, and code Playground

by slo_nik

HTML

<form action="#">
	<textarea name="limitChars" autocomplete="off" id="limitInput" cols="30" rows="10"></textarea>
	</form>
	<div id="typeChars"></div>

JavaScript

function limitChars(myObject, typeChars){
        $(myObject).on('input propertykeyup', function(){
            address = $(this).val().trim()
            var pattern = /^(([https:\/\/]?)*?)[-?\w\/.=&;]*?$/;
            var result = new RegExp(pattern);
            if(!result.exec(address)){
                count = $(this).val().trim().length;
                amount = 30;
                var sum_count = Math.round(count*120/1000);
                if (sum_count > amount) {
                    amount = sum_count;
                }
            }
            else{
                count = 0
                amount = 30
            }
            $(typeChars).text('Символов: ' + count + '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Стоимость проверки: ' + amount + ' рублей');
        });
    }
    
    $(document).ready(function(){
        var myObject = '#limitInput'; // объект, у которого считаем символы
        var typeChars = '#typeChars'; // куда выводим кол-во введенных символов
        var count = 0;
        var amount = 30;

        limitChars(myObject, typeChars);

        $(typeChars).text('Символов: ' + count + '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Стоимость проверки: ' + amount + ' рублей');

    });