如何将网页上的文本更改为带有 url 的名称

Question

我们正在重新做一个几年前的旧项目，但是页面丢失了，所以我正在重建它们。 你可以在这里找到它：http://limoon.nl/valentijn

客户会得到一个附有 QR 码的气球进行扫描，从而将他们带到此页面。但是每个代码都有一个特殊的个性化url，例如：https://limoon.nl/valentijn/?n=eric%20anderson&pla=ho

他们的名字将被填写到 {name} 元素中。我不知道要这样做，因为这是几年前建立的前同事。有什么建议吗？

编辑：我们找到了这样放置的备份，它又可以工作了！

Answer 1

您可能需要在 wordpress 上的某个地方填写名称。应该已经被服务器上的模板引擎替换了

如果你绝对不能解决它，试试这个

将下面的脚本放入页面头部的<script></script>标签中并从const url = new URL(location.href)行中取消注释（删除前导//）并删除const url = new URL("https://limoon.nl/valentijn/?n=eric%20anderson&pla=ho");

String.prototype.toProperCase = function () { return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});};

window.addEventListener("load",function() {
  // uncomment next line
  // const url = new URL(location.href)
  // delete next line
  const url = new URL("https://limoon.nl/valentijn/?n=eric%20anderson&pla=ho");
  let naam = url.searchParams.get("n")
  naam = naam ? naam.toProperCase() : "";
  document.querySelectorAll('.et_pb_text_inner p strong').forEach(tag => {
    let text = tag.innerText;
    if (text.indexOf('{NAAM}') !=-1) tag.innerText = text.replace("{NAAM}",naam);
  })
})

<div class="et_pb_section et_pb_section_3 et_pb_with_background et_section_regular">
  <div class="et_pb_row et_pb_row_3">
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_3  et_pb_css_mix_blend_mode_passthrough et-last-child">
      <div class="et_pb_module et_pb_text et_pb_text_0  et_pb_text_align_center et_pb_bg_layout_light">
        <div class="et_pb_text_inner">
          <p><strong>HI {NAAM},</strong></p>
        </div>
      </div>
      <div class="et_pb_module et_pb_text et_pb_text_1  et_pb_text_align_center et_pb_bg_layout_light">
        <div class="et_pb_text_inner">
          <p style="text-align: center;">Heb je mijn video al gezien?<br />Maak dan hieronder jouw keuze.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="et_pb_row et_pb_row_4 et_pb_equal_columns">
    <div class="et_pb_column et_pb_column_1_3 et_pb_column_4  et_pb_css_mix_blend_mode_passthrough">
      <div class="et_pb_module et_pb_text et_pb_text_2  et_pb_text_align_center et_pb_bg_layout_light">
        <div class="et_pb_text_inner">
          <p><strong>HET IS LIEFDE OP HET</strong><br /><strong>EERSTE GEZICHT</strong></p>
        </div>
      </div>
    </div>
  </div>
</div>