根據網址動態更改頁面內容

Question

是否可以根據URL更改網頁上的內容？

例如，當有人訪問：

example.com/dyanmictextpage.html/?utm_source=google & utm_campaign = dynamictext & utm_term =你好世界

我想更新的特定部分然後在網頁上說出「Hello World」，它基於URL「utm_term = hello-world」下的最後部分

代碼需要自動插入「utm_term =」後面的任何內容，然後移除連字符和大寫每個單詞的第一個字母.....

你知道嗎？

Answer 1

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(' '); 
} 

Answer 2

你可以 - 一個很好的開始就是把你的問題分解成更小的問題，並逐個解決。

你需要做的第一件事是從URL（即utm_term =你好世界）獲得查詢字符串值：

How can I get query string values in JavaScript?

一旦你得到了這些，你需要動態替換之類的連字符，因此您可以將工作數據成你想要的格式：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FString%2Freplace

一旦你做到了這一點，你可以注入內容到頁面。我會留下那一點讓你擡頭看。