通过表单中的链接自动填充网站标题

Question

<form method="POST" action="{{ route('storeCompany') }}">
            @csrf
            <label>{{ __('Website URL') }}</label>
            <input type="text" name="url" value="{{ old('url') }}" placeholder="{{ __('http://example.com') }}" class="form-control" required="required">
            <label>{{ __('Website Title') }}</label>
            <input type="text" name="name" value="{{ old('name') }}" placeholder="{{ __('Example Ltd') }}" class="form-control" required="required">
            <input type="submit" name="sbNewReviewItem" class="btn btn-block btn-primary" value="{{ __('Submit New Company') }}">
</form>

我希望在用户键入“网站 URL”时自动填充“网站标题”字段，如果用户愿意，“网站标题”必须是可编辑的。我怎样才能做到这一点？请帮忙:(

示例：当用户在“网站 URL”字段中输入https://stackoverflow.com/ URL 时，“网站标题”字段必须自动填写为Stack Overflow - Where Developers Learn, Share, & Build Careers

Answer 1

您在url-field 元素上有一个change 事件，该事件向api 网站发出获取请求，返回该网站的html 内容，然后它使用正则表达式提取html 标题，然后将其添加到名称字段。

此外，在执行获取时，我们会显示 Fetching 文本，让用户知道发生了什么。并且表单提交事件已通过preventDefault() 函数停止。用户提交表单后，您可以在此处为所欲为。

不要使用https://api.codetabs.com/v1/proxy/?quest= 来限制您的请求并向您显示Too many requests 错误，您应该使用自己的代码来获取网站内容然后返回响应。为了优化这一点，您可以只返回网站标题，以节省带宽和 CPU 周期。

您需要 api 来获取网站内容的原因是 CORS。您不能只使用从您想要的任何网站获取资源。您只能从当前网站或允许您这样做的网站执行此操作。

document.addEventListener('submit', event => {
  event.preventDefault()
})

document.addEventListener('change', async (event) => {
  if (event.target.classList.contains('url-field')) {
    await changeUrl(event.target.closest('form').elements)
  }
})

async function changeUrl (fields) {
  try {
    if (!fields.url.value) return
    fields.output.removeAttribute('hidden')
    const response = await fetch('https://api.codetabs.com/v1/proxy/?quest=' + encodeURI(fields.url.value))
    const html = await response.text()
    const match = /<title[\s\S]*?>([\s\S]*?)<\/title>/gi.exec(html)
    if (!match || !match[1]) throw new Error('No title found')
    fields.name.value = match[1].trim()
    fields.output.setAttribute('hidden', '')
  } catch (error) {
    console.error(error)
  }
}

<form method="POST" action="">
<p>
  <label>Website URL</label>
  <input type="url" name="url" value="" placeholder="http://example.com" class="form-control url-field" required>
  <output name="output" hidden>Fetching</output>
</p>
<p>
  <label>Website Title</label>
  <input type="text" name="name" value="" placeholder="Example Ltd" class="form-control">
</p>
<input type="submit" name="sbNewReviewItem" class="btn btn-block btn-primary" value="Submit New Company">
</form>

Answer 2

因为您的示例看起来像 Laravel。 我发现用 PHP 写一个答案是合适的。

example.blade.php

<title>{{ $title ?? 'Default title' }}</title>
<form method="POST" action="{{ route('storeCompany') }}">
    @csrf
    <label>{{ __('Website URL') }}</label>
    <input type="text" name="url" value="{{ $url ?? old('url') }}" placeholder="{{ __('http://example.com') }}" class="form-control" required="required">
    <label>{{ __('Website Title') }} <small>(Leave blank to retrieve from URL)</small></label>
    <input type="text" name="name" value="{{ $title ?? old('name') }}" placeholder="{{ __('Example Ltd') }}" class="form-control">
    <input type="submit" name="sbNewReviewItem" class="btn btn-block btn-primary" value="{{ __('Submit New Company') }}">
</form>

CompanyController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class CompanyController extends Controller
{
    public function index(){
        
        return view('example');
    }
    
    public function storeCompany(Request $request){
        
        $title = $request->name;

        if (empty($title) && filter_var($request->url, FILTER_VALIDATE_URL)){
            $response = HTTP::get($request->url);
            if ($response->ok()){
                preg_match('/<title>(.*)<\/title>/i', $response->body(), $matches);
                $title = $matches[1] ?? null;
            }
        }

        $data = [
            'url' => $request->url,
            'title' => $title
        ];
        
        return view('example', $data);
    }
}

Answer 3

用户输入数据后。

使用$("#text_field").val();获取值

进行ajax调用并使用以下函数获取值，将url传递给t

require 'simple_html_dom.php';
function dataParser($url){
    $html = new simple_html_dom();
    $html->load_file($url); 
    $title = $html->find('title',0)->innertext;
    return $title;
}
// something like $_GET['user_url'];
echo  $title = dataParser('https://stackoverflow.com');

此代码将输出标题，将其设置为要显示标题的 div，如下所示

var ajaxCallResponse = ""//store the response here
$("#title_div").val(ajaxCallResponse);

Answer 4

方法如下：

1. 阅读网站网址。
2. 向 codetabs api 发送 ajax 请求以获取完整的 html。
3. 从 html 中获取标题。
4. 对标题做任何你想做的事。

function gettitle(website) {
  if(website.trim() == ''){
   return false;
  }
  var url = 'https://api.codetabs.com/v1/proxy/?quest=' + website;
  $.ajax({
    url: url,
    success: function(responseHtml) {
      var newTitle = $(responseHtml).filter('title').text();
      document.getElementById('title').innerHTML = 'Title: ' + newTitle
    },
    error: function() {
      document.getElementById('title').innerHTML = newTitle = 'Sorry that page doesn\'t';
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder='Website' oninput='gettitle(this.value)' type='url' id='url'>
<div id='title'></div>