html中一部分URL的重用内容

Question

我想在网页的内容中重复使用URL的某些

部分 domain.com/specialist/brand/location/

我想在网页的内容中多次重用“品牌” 以及网页内容中多次“位置”。

首先，我尝试了变量 url/？专家= brand＆amp; bezorgen = city，

但这与以下方法不起作用，因为它只会使它们

尝试使用

<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>

最快的方法来获得此工作

技术= twig = twig and js

提前感谢

Answer 1

twig

当您使用自定义框架时，我建议您模仿app.request.get symfony 中可用的行为。

首先创建一个提供相同逻辑

request.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'];
    }
}

的

类请求类只是将其添加为全局

<?php
    ...
    $twig->addGlobal('app', [ 'request' => new Request(), ]);

访问模板中的

<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>

---

类不安全的输出。但是twig只要您不将内容标记为安全，例如filter raw

Answer 2

JavaScript

您的JavaScript的问题可能是因为您一遍又一遍地创建具有相同ID的元素，这就是为什么只有正确ID的第一个元素才能正确替换

为一个简单的解决方案。

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>

Answer 3

我可能会误解，但是OP似乎问两件事：（1）如何从路径或查询中提取信息 - （2）如何使用该信息更改DOM。

查看（1），您可以从Expression 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);

查看（2），OP代码看起来不错，除了DIV的ID需要以报价放置...

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>

Answer 4

仅树枝的解决方案：

{% set brand %}{{ request.url| split('/', 7)[5]| trim('/')  }}{% endset %}
{% set location %}{{ request.url| split('/', 7)[6]| trim('/')  }}{% endset %}

在给所有回答的人的文字中

   this {{ brand }} bike is awesome, come and buy it at {{ brand }} {{ location }}

，非常感谢！这个问题让我在过去几周里烦恼

，而在URL中没有品牌或位置

{% set band %}{{ request.url| split('/', 7)[5]| trim('/') |capitalize }}{% endset %} 
{% if brand is empty %}
{% set brand %}qualitybikes {% endset %}
{% endif %}
{% set loation %}{{ request.url| split('/', 7)[6]| trim('/') |capitalize }}{% endset %}
{% if location is empty %}
{% set location %}entire country {% endset %}
{% endif %}