如何获取URL参数动态修改HTML文本并支持多位置替换和默认值

第一步：调整页面标签 #

把所有需要动态替换 salon 名称的位置，统一使用 class 标记（id 全局唯一无法复用，class 可多处添加）：

<!-- 可以在页面任意位置重复添加该标签 -->
<span class="salon-name"></span>

第二步：修改后的完整JS代码 #

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 1. 获取参数并设置默认值，可自行修改下方默认文本
const salonName = getParameterByName('salon') || '默认沙龙名称';
// 2. 匹配所有标记了对应class的元素，批量修改文本
document.querySelectorAll('.salon-name').forEach(el => {
    el.innerText = salonName;
});

补充说明 #

• 把代码里的默认沙龙名称替换为你需要的兜底展示文本即可
• 页面需要多少处动态显示 salon 名称，就加多少个<span class="salon-name"></span>，不需要额外修改JS逻辑

内容的提问来源于stack exchange，提问作者Daniel