Хочу сделать скрипт для получения доп.данных пользователя и упростить вставку URL для пользователей. Есть код
<input class="input" type="text" name="id" size="33" required>
И например пользователь вводит ссылку на страницу:
https://vk.com/durov
Из этой ссылки мне нужно выбрать durov. Как реализовать такое? Знаю, что это просто, но пока не знаю как :(
С помощью регулярного выражения вы может отбросить лишнюю часть 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" />
Начать с того, что нужно получить текст из 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() возвращает индекс последнего вхождения указанного значения в строку.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости