Modifier dynamiquement le contenu de la page en fonction de l'URL

Question

Est-il possible de modifier le contenu d'une page Web en fonction de l'URL?

Par exemple, lorsque quelqu'un visite:

example.com/dyanmictextpage.html/?utm_source=google & utm_campaign = DynamicText & utm_term = bonjour monde

Je souhaite mettre à jour un morceau spécifique de texte sur la page pour ensuite dire "Hello World" qui est basé sur la dernière partie de l'URL sous "utm_term = hello-world"

Le code devrait insérer automatiquement ce qui est après "utm_term =" et supprimer le tiret et mettre en majuscule les premières lettres de chaque mot .....

Savez-vous comment ??

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

Vous pouvez - un bon endroit pour commencer est de décomposer votre problème en petits problèmes, et le résoudre morceau par morceau.

La première chose que vous devez faire est d'obtenir les valeurs de chaîne de requête de l'URL (par exemple utm_term = bonjour-monde):

How can I get query string values in JavaScript?

Une fois que vous avez ceux-ci, vous aurez besoin de remplacer dynamiquement des choses comme des traits d'union afin que vous puissiez travailler les données dans le format que vous voulez:

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

Une fois que vous avez fait cela, vous pouvez injecter du contenu dans la page. Je vais laisser ça pour que vous leviez les yeux.