根据url动态更改页面内容

changing page content dynamically based on the url

本文关键字：url 动态 根据      更新时间：2023-09-26

是否可以根据URL更改网页内容?

例如，当某人访问:

example.com/dyanmictextpage.html/? utm_source = google& utm_campaign = dynamictext& utm_term = hello world

我想在页面上更新一段特定的文本，然后说"Hello World"，这是基于URL的最后一部分在"utm_term= Hello - World"

代码需要自动插入"utm_term="之后的内容，并删除连字符并将每个单词的第一个字母大写.....

你知道怎么??

var message = '';
var query = document.location.search.substring(1); // Remove leading '?'
var params = query.split('&');
// Get 'utm_term' from the request parameters
for (var i = 0; i < params.length; i++) {
   var key = params[i].split('=')[0];
   if (key === 'utm_term') {
      message = params[i].split('=')[1];
      break;
   }
}
if (message.length > 0) {
   // Split the message by words and capitalize the first letter of each word
   var words = message.split('-');
   for (var i = 0; i < words.length; i++) {
      words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1);
   }
   // Finally, put the message to HTML (say, to element with id="message")
   document.getElementById('message').innerHTML = words.join(' ');
}

你可以——一个好的开始是把你的问题分解成更小的问题，然后一点一点地解决。

你需要做的第一件事是从URL(即utm_term=hello-world)获取查询字符串值:

如何在JavaScript中获得查询字符串值?

一旦你有了这些，你需要动态地替换像连字符这样的东西，这样你就可以把数据转换成你想要的格式:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace?redirectlocale=en-US& redirectslug = JavaScript % 2 freference % 2 fglobal_objects % 2 fstr % 2 freplace

一旦你这样做了，你可以注入内容到页面。我把这部分留给你们去查

相关文章：