如何在JavaScript中基于键值对集合动态生成对应超链接？

需求说明 #

我需要在页面模板里根据键值对集合，当页面包含特定学校名称时，自动插入对应的超链接。目前已经实现了单个学校的匹配显示功能，但现在有80-90所学校要处理，不想写大量重复的div和判断逻辑。

现有单学校实现代码：

<style>
#viewSchoolLink 
        {display: none;}
</style>

<div id="schoolName">University of Houston</div>
<div id="viewSchoolLink"><a href="https://www.somelink.com/widget=4379">View on Some Link</a></div>

<script type="text/javascript">
var div = document.getElementById("schoolName");
var text = div.innerHTML;
if (text.indexOf("University of Houston") >= 0) {
    // 匹配到则显示链接
    document.getElementById("viewSchoolLink").style.display = "block";
}
</script>

我已经定义了两种键值对集合形式，希望通过循环遍历集合，匹配页面中的学校名称后动态插入超链接：

形式一（存储完整URL）

const schoolLink = {
"University of Houston": "https://www.somelink.com/widget=4379",
"Vanderbilt University" : "https://www.somelink.com/widget=2537",
"University of Dundee": "https://www.somelink.com/widget=2845",
}

形式二（仅存储widget编号）

const schoolLink = {
"University of Houston": 4379,
"Vanderbilt University" : 2537,
"University of Dundee": 2845,
}

解决方案 #

通用优化思路

不需要提前创建多个viewSchoolLink div，直接在匹配到学校后动态创建链接元素并插入到页面中，既节省冗余代码，又能灵活处理所有学校。

针对形式一（完整URL）的实现代码

<div id="schoolName">University of Houston</div>
<!-- 无需提前编写链接容器，动态生成即可 -->

<script type="text/javascript">
const schoolLink = {
  "University of Houston": "https://www.somelink.com/widget=4379",
  "Vanderbilt University": "https://www.somelink.com/widget=2537",
  "University of Dundee": "https://www.somelink.com/widget=2845"
};

const schoolNameEl = document.getElementById("schoolName");
const schoolName = schoolNameEl.textContent.trim();

// 遍历键值对匹配学校名称
for (const [name, url] of Object.entries(schoolLink)) {
  if (schoolName.includes(name)) {
    // 创建链接元素
    const linkEl = document.createElement('a');
    linkEl.href = url;
    linkEl.textContent = "View on Some Link";
    linkEl.style.marginLeft = "10px"; // 可选：添加自定义样式
    
    // 将链接插入到学校名称元素后方
    schoolNameEl.insertAdjacentElement('afterend', linkEl);
    break; // 匹配到目标学校后停止遍历，避免重复插入
  }
}
</script>

针对形式二（仅widget编号）的实现代码

只需在生成URL时拼接固定前缀，其余逻辑和形式一一致：

<div id="schoolName">Vanderbilt University</div>

<script type="text/javascript">
const schoolLink = {
  "University of Houston": 4379,
  "Vanderbilt University": 2537,
  "University of Dundee": 2845
};

const schoolNameEl = document.getElementById("schoolName");
const schoolName = schoolNameEl.textContent.trim();
const baseUrl = "https://www.somelink.com/widget="; // 固定URL前缀

for (const [name, widgetId] of Object.entries(schoolLink)) {
  if (schoolName.includes(name)) {
    const linkEl = document.createElement('a');
    linkEl.href = `${baseUrl}${widgetId}`; // 拼接完整URL
    linkEl.textContent = "View on Some Link";
    
    schoolNameEl.insertAdjacentElement('afterend', linkEl);
    break;
  }
}
</script>

额外优化建议 #

• 如果学校名称存在大小写差异，可统一转成小写后匹配：if (schoolName.toLowerCase().includes(name.toLowerCase()))
• 如果需要给所有链接统一样式，可在CSS中定义.school-link { /* 自定义样式 */ }，然后给动态创建的链接添加类名：linkEl.classList.add('school-link')

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