Tiene un evento de change en el elemento url-field que realiza una solicitud de búsqueda a un sitio web de API que devuelve el contenido html de ese sitio web, y luego usa expresiones regulares para extraer el título html y luego lo agrega al campo de nombre.

Además, mientras se ejecuta la obtención, mostramos un texto de Fetching para que el usuario sepa lo que está sucediendo. Y el evento de envío de formulario se ha detenido con la función preventDefault() . Aquí puede hacer lo que quiera después de que el usuario envíe el formulario.

En lugar de usar https://api.codetabs.com/v1/proxy/?quest= que limitará sus solicitudes y le mostrará un error de Too many requests , debe usar su propio código que recupera el contenido del sitio web y luego devolver la respuesta . Para optimizar esto, puede devolver solo el título del sitio web, para ahorrar en ancho de banda y ciclos de CPU.

La razón por la que necesita una API para obtener el contenido del sitio web es por CORS. No puede simplemente usar recursos de búsqueda de cualquier sitio web que desee. Solo puede hacerlo desde el sitio web actual o desde sitios web que le hayan permitido hacerlo.

 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>

Porque tu ejemplo se parece a Laravel. Me pareció apropiado escribir una respuesta en 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); } }

Aquí está cómo:

1. Lea la URL del sitio web.
2. Envíe una solicitud ajax a codetabs api para obtener html completo.
3. Obtenga el título del html.
4. Haz lo que necesites con el título.

 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>