Подстановка pattern'а из html в js

Question

Мне нужно реализовать скрипт, который будет читать атрибут pattern у input'а и подсвечивать строку красным при неверном введенном значении.

Проблема: Если задать переменную pattern явно, то все работает, но если считать ее непосредственно из input`а

var pattern = "/" + $($(this)).attr("pattern") + "/";(с одинарными ковычками тоже не работает)

то появляется ошибка, хотя выводя данное выражение в консоль, оно в точности совпадает с тем, что я ввел явно

var pattern = /^[а-яА-ЯёЁ0-9,.:\-+\s\x22]{0,255}$/;

script

$(document).ready(function() {
    $('input').on('input', function() {
            console.log("/" + $($(this)).attr("pattern") + "/");

            //var pattern = "/" + $($(this)).attr("pattern") + "/";/////////подстановка
            var pattern = /^[а-яА-ЯёЁ0-9,.:\-+\s\x22]{0,255}$/; ////////////явно

            if (pattern.test($(this).val())) {
                $(this).css({
                    'border': '2px solid #ebebeb'
                });
                //$('#valid').text('');
            } else {
                $(this).css({
                    'border': '2px solid #ff0000'
                });
                //$('#valid').text('Только латинские символы и цифры');
            }

    });
});

**html **

 <form method="POST" action="/expsearch">
        <input type="text" name="name" th:value="${name}" placeholder="Введите название книги" pattern="^[а-яА-ЯёЁ0-9,.:\-+\s\x22]{0,255}$" class="form-control"><br>
        <button type="submit" class="btn btn-success">Найти книги</button>
    </form>

Answer 1

используйте new RegExp(pattern, flags) для преобразования строки в регулярное выражение

let regEx = new RegExp(string);

$(document).ready(function() {
    $('input').on('input', function() {
            console.log(new RegExp($(this).val()));

            var pattern = new RegExp($(this).val());
            
            if (pattern.test($(this).val())) {
                $(this).css({
                    'border': '2px solid #ebebeb'
                });
                //$('#valid').text('');
            } else {
                $(this).css({
                    'border': '2px solid #ff0000'
                });
                //$('#valid').text('Только латинские символы и цифры');
            }

    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/expsearch">
        <input type="text" name="name" th:value="${name}" placeholder="Введите название книги" class="form-control"><br>
        <button type="submit" class="btn btn-success">Найти книги</button>
    </form>

БЛОГ НА HUSL

Подстановка pattern'а из html в js

Ответы (1 шт):