Как сделать так, чтобы панель поиска с кнопкой <input>открывала домен, если он введен?

Question

В настоящее время у меня есть этот код для пользовательской строки поиска DuckDuckGo:

<form action="https://duckduckgo.com/" method="get" id="ddg-search">
    <div class="div-block-4">
        <input autofocus="true" class="text-field-3 hero-search-bar w-input" data-name="q" id="field-3" maxlength="256" name="q" placeholder="Search DuckDuckGo" type="text">
    </div>
</form>

Он автоматически открывает URL https://duckduckgo.com/?q={{SEARCH}}, когда вы вводите текст в поле и нажимаете клавишу ввода.

Как я могу заставить эту панель перейти в домен, если он введен?Оптимально, он не будет проверять домен, просто если он увидит строку в шаблоне xxxx.* без пробелов, он откроет эту страницу в новой вкладке.

Спасибо за любую помощь!

Answer 1

Один из способов решения этой проблемы - захват события отправки формы, анализ входного значения и, когда это домен, откройте новое окно с доменом и отмените отправку, вернув false. В случае, если домен не является действительным, оставьте форму как обычно, вернув true.

Ваш html:

<form action="https://duckduckgo.com/" method="get" onsubmit="return decideWhatToDo()" id="ddg-search">
    <div class="div-block-4">
        <input autofocus="true" class="text-field-3 hero-search-bar w-input" data-name="q" id="field-3" maxlength="256" name="q" placeholder="Search DuckDuckGo" type="text">
    </div>
    <input type="submit" />
</form>

Ваш JavaScript:

function decideWhatToDo() {  
  let inputValue = document.getElementById('field-3').value;

  if (isDomain(inputValue)) {
    // the form won't be sent and a new window will open requesting the domain    
    if (!startsWithProtocol(inputValue)) {
      inputValue = 'http://' + inputValue;
    }

    window.open(inputValue, '_blank');
    return false;
  } 

  // Proceed to send the form as usual
  return true;
}

function startsWithProtocol(value) {
  return /^((https?|ftp|smtp):\/\/)/.test(value);
}

function isDomain(value) {
  return /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/.test(value);
}

Answer 2

Таким образом, один из способов справиться с этим - использовать условие if и сравнить строку с RegExp, который распознает доменные имена.

Вот изящный, который вы можете использовать:

/[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+/

Полагаю, вам не нужна помощь в получении значения из текстового поля или фактического перенаправления. Однако, если вам нужна дополнительная помощь, прокомментируйте ниже, и я выложу более полный ответ. Код ниже должен помочь вам добраться туда, куда вы хотите:

var domainRegExp = /[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+/

var pass = domainRegExp.test('test.com')
var fail = domainRegExp.test('test')

console.log(pass, 'pass')
console.log(fail, 'fail')

Итак, как вы можете видеть, значение в переменной 'pass' равно true, а fail = false.