me gustaría reutilizar partes de la url en el contenido de la página web
como ejemplo dominio.com/especialista/marca/ubicación/
donde quiero reutilizar "marca" varias veces en el contenido de la página web y también "ubicación" varias veces en el contenido de la página web.
primero lo probé con las variables url/?specialist=brand&bezorgen=city
pero esto no funciona con el siguiente método, porque los representa solo una vez
he probado el
<script> const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const specialist = urlParams.get('specialist'); const bezorgen = urlParams.get('bezorgen'); document.getElementById("specialist").innerHtml = specialist; document.getElementById("bezorgen").innerHtml = bezorgen; </script> and in the html <span id=specialist></span> <span id=bezorgen></span>¿Cuál sería la forma más rápida de hacer que esto funcione?
tecnología = ramita y js
Gracias por adelantado
Como estás usando un marco personalizado, te sugiero que imites el comportamiento de app.request.get que está disponible en Symfony .
Primero crea una clase que entregue la misma lógica
Solicitud.php
class Request { public function __construct() {} public function get($key) { return isset($_GET[$key]) ? $_GET[$key] : null; } public function post($key) { return isset($_POST[$key]) ? $_POST[$key] : null; } public function url() { $http = 'http'.(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 's': ''); return $http.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; } } Registrar la clase en twig
La forma más fácil de agregar una instancia de la clase Request es simplemente agregarla como una instancia global.
<?php ... $twig->addGlobal('app', [ 'request' => new Request(), ]);Accede a la clase dentro de una plantilla.
<p>this {{ app.request.get('brand') }} bike is pretty awesome and we can deliver this at {{ app.request.get('location') }}. This {{ app.request.get('brand') }} is really trustworthy</p>nota obligatoria
Tenga en cuenta que es posible que los clientes intenten inyectar/generar resultados no seguros. Sin embargo, twig evitará esto siempre que no marque el contenido como seguro, por ejemplo, con el filtro raw .
El problema con su javascript probablemente se deba a que está creando elementos con la misma identificación una y otra vez, por lo que solo el primer elemento con la identificación correcta se reemplazará correctamente.
Una solución fácil sería cambiar a clases.
var foo = 'foo'; var bar = 'bar'; document.querySelectorAll('.foo').forEach(span => { span.innerHTML = foo; }); document.querySelectorAll('.bar').forEach(span => { span.innerHTML = bar; }); span { display: block; } span + span { margin: 10px 0 0 0; } span.foo { color: red; } span.bar { color: green; } <span class="foo"></span> <span class="foo"></span> <span class="bar"></span> <span class="foo"></span> <span class="foo"></span> <span class="bar"></span>Puede que no lo entienda bien, pero el OP parece preguntar dos cosas: (1) cómo extraer información de la url, ya sea desde la ruta o desde la consulta, (2) cómo modificar el dom con esa información.
Mirando (1), puede obtener mucha información de la expresión new URL(window.location.href);
// using the path // these window-named vars to simulate the browsers' window global let windowA = { location: { href: "http://example.com/specialist/mybrand/mylocation" } }; const urlA = new URL(windowA.location.href); console.log(urlA.pathname.split('/').slice(-2)); // using the query let windowB = { location: { href: "http://example.com/specialist/?brand=mybrand&location=mylocation" } }; const urlB = new URL(windowB.location.href); const params = [urlB.searchParams.get('brand'), urlB.searchParams.get('location')] console.log(params);Mirando (2), el código OP se ve bien, excepto que las identificaciones de div deben colocarse entre comillas ...
let _window = { location: { href: "http://example.com/specialist/mybrand/mylocation" } }; const url = new URL(_window.location.href); const components = url.pathname.split('/').slice(-2); document.getElementById("brand").innerHTML = `<h1>${components[0]}</h1>`; document.getElementById("location").innerHTML = `<h1>${components[1]}</h1>`; <!-- notice the quoted id expressions --> <div id="brand"></div> <div id="location"></div>