Получение информации из Input на JS?

367

28 декабря 2016, 05:22

Как лучше всего сделать получение информации из перемонной который мы получаем допустим из формы на сайте? Допустим мы спрашиваем у пользоватя: "Как вас зовут и сколько вам лет?" и пользователь пишет в input "меня зовут *name и мне *age лет". Как мы можем получить значение *name и *age на JS? Буду Благодарен за помощь!

Answer 1

Это одни из вариантов. Таких вариантов могут быть тысячи. Легче разделить поля на двое )

$(function() { 
  $('button').click(function() { 
    var name = $('input').val().replace(/.*(?:[Зз](?:о|а|О|А)[Вв][Уу][Тт]\ ([А-Яа-я]+)|[Ии][Мм][Яя]\ ([А-Яа-я]+)|[Ии][Мм][Яя]\ [Мм][Оо](?:ёе)\ ([А-Яа-я]+)|[Зз][Вв][Аа][Тт][Ьь]\ ([А-Яа-я]+)|[Зз][Вв][Аа][Тт][Ьь]\ [Мм][Ее][Нн][Яя]\ ([А-Яа-я]+)|([А-Яа-я]+)\ [Зз](?:о|а|О|А)[Вв][Уу][Тт]).*/, '$1'); 
    var old = $('input').val().replace(/.*(?:[Мм][Нн][Ее]\ (\d+)\ [Лл][Ее][Тт]|[Лл][Ее][Тт]\ [Мм][Нн][Ее]\ (\d+)|[Жж][Ии][Вв][Уу]\ (\d+)\ [Гг][Оо][Дд]).*/, '$1'); 
    console.log('Имя: '+name+'; Возраст: '+old); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Как тебя зовут и сколько тебе лет?</p> 
<input type="text" value="Меня зовут Юрий, мне 17 лет"> 
<button>Ответить</button>

Answer 2

Можно использовать регулярное выражение вида

answerText.match(/^Меня зовут ([^, ]+), мне (\d+) лет$/);

где answerText это текст как ответил пользователь. Скобки нужны для обозначения "переменных" куда будет помещен результат. Считаем что после слова "зовут " пользователь поместил свое имя, и после имени идет пробел или запятая, это выражение "([^, ]+)", знак ^ означает "пока не", [] - альтернативный выбор, + означает одно и более повторений, дословно "пока не встретился пробел или запятая, читаем значение в переменную" (\d+) означает одна или более цифр, \d - обозначает цифру Результатом answerText.match(...) будет массив, где индекс элемента соответствует номеру открывающейся скобки в выражении, все найденное выражение имеет индекс 0. Если совпадение не найдено то функция "match" вернет null.

Модификатор i в "/.../i" означает что поиск производим без учета регистра.

function submitAnswer() { 
  var answerText = document.getElementById("answer").value; 
  var parsedAnswer = answerText.match(/^Меня зовут ([^, ]+), мне (\d+) лет.?$/i); 
  var result = document.getElementById("result"); 
  if (parsedAnswer && parsedAnswer.length === 3) { 
    result.value = 'Вас зовут ' + parsedAnswer[1] + "\n" + 
                  'Вам ' + parsedAnswer[2] + ' лет';  
  } else { 
    result.value = 'Ваш ответ непонятен. Пожалуйста ответьте строкой вида "Меня зовут ВашеИмя, мне Число лет"'; 
  } 
}

<div> 
   <input type="text" size="30" value="Меня зовут Юрий, мне 17 лет" id="answer"> 
   <button onclick="submitAnswer()">Ответить</button> 
</div> 
<div> 
   <label for="result">Ответ:</label> 
   <textarea id="result" cols="20" rows="3"></textarea> 
</div>

Answer 3

$("#inpt").keyup(function(){ 
	var myString = document.getElementById("inpt").value; 
	var myRegexp = /меня зовут (.*) и мне (.*) лет/g 
	var match = myRegexp.exec(myString); 
 
  document.getElementById("nm").innerHTML = match[1]; 
  document.getElementById("ag").innerHTML = match[2]; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
<input id="inpt" style="width:500px"> 
<br> 
name:<span id="nm"></span> 
<br> 
age:<span id="ag"></span> 
</form>