Выбор текста из input

303
27 марта 2017, 09:07

Хочу сделать скрипт для получения доп.данных пользователя и упростить вставку URL для пользователей. Есть код

<input class="input" type="text" name="id" size="33" required>

И например пользователь вводит ссылку на страницу:

https://vk.com/durov

Из этой ссылки мне нужно выбрать durov. Как реализовать такое? Знаю, что это просто, но пока не знаю как :(

Answer 1

С помощью регулярного выражения вы может отбросить лишнюю часть url страницы:

document.getElementById('get').addEventListener("click", function() { 
  var pageId = document.getElementById('pageUrl').value.replace(/^https?\:\/\/vk\.com\/(\w+)\/?/, '$1'); 
  alert(pageId); 
});
<input class="input" type="text" name="id" size="33" id="pageUrl" required> 
<input id="get" value="Получить" type="button" />

Answer 2

Начать с того, что нужно получить текст из input-элемента. Способов очень много, возьмем какой-нибудь простой, я придерживаюсь получения элемента по идентификатору, поэтому добавил бы атрибут идентификатора:

<input class="input" type="text" name="id" id="myInput" size="33" required>

Просто добавил id="myInput", идентификаторы как никак вносят некую уникальность. После чего получу данный элемент и его значение в js-скрипте:

var inputValue = document.getElementById("myInput").value;

Вот хороший ответ по получению значения текста из input с enSO: JavaScript: how to get value of text input field?. Текст из поля ввода есть, теперь возьмем то, что нам нужно в этом тексте. Опять же - способов много, если с регулярками не знакомы, то можно старым добрым substr и lastIndexOf

var result = inputValue.substr(inputValue.lastIndexOf("/") + 1);

Внутри функции substr +1 - для того, чтобы слэш не попал в результат.

function showResult(){ 
  var inputValue = document.getElementById("myInput").value; 
  var result = inputValue.substr(inputValue.lastIndexOf("/") + 1); 
  alert(result); 
}
<input class="input" type="text" name="id" id="myInput" size="33" required> 
<button onclick="showResult()">Результат</button>

Метод substr() возвращает указанное количество символов из строки, начиная с указанной позиции, если второй параметр не указан, то вернет все символы с указанной позиции до конца строки. Метод lastIndexOf() возвращает индекс последнего вхождения указанного значения в строку.

READ ALSO
выводить alert в цикле

выводить alert в цикле

Технически возможно выводить сообщение (alert) в цикле?

304
Drag and drop в canvac

Drag and drop в canvac

Есть функция для создания прямоугольника

206
Создание выпадающего меню

Создание выпадающего меню

Всем приветЕсть выпадающее меню со структурой Родитель > Ребенок уровень-1 > Ребенок уровень-2

270