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>

当您在框中输入文本并按Enter键时，它将自动打开URL https://duckduckgo.com/?q={{SEARCH}}。

如果输入了此栏，我如何使该栏进入某个域？理想情况下，它不会验证域，即使它看到模式xxxx.*中没有空格的字符串，也会在新标签页中打开该页面。

谢谢您的帮助！

Answer 1

处理这种情况的一种方法是使用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。

Answer 2

解决该问题的一种方法是捕获表单的Submit事件，分析输入值，当输入值是域时，使用该域打开一个新窗口，并通过返回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);
}

如果输入，如何用<input />按钮使搜索栏打开域？

2 个答案: