JS实现单行带链接姓名展示功能：拼接的a标签不渲染为可点击链接

1. 代码本身存在语法、逻辑错误：

• 判断用户是否有个人页面的逻辑括号位置错误，founderqueryname.indexOf(foundernamelower>=0) 实际是将布尔值传入indexOf方法，判断逻辑完全失效。
• 字符串拼接逻辑错误，else分支重复叠加已有内容，会导致输出内容重复。
• 多余的thelink.innerHTML=thelink代码无效，字符串对象不存在innerHTML属性。

2. 渲染方式错误：

• 你用JSON.stringify处理函数返回的HTML字符串，会对字符串内的引号、标签符号做转义，最终输出的是纯文本格式的标签内容。
• 渲染时如果用纯文本插入方式（比如原生JS的innerText、Vue的双大括号插值、React的普通变量渲染），浏览器会默认把HTML标签当做普通文本展示，不会解析为可点击的DOM元素。

第一步：修正函数代码 #

function founderslinked(foundernames, foundersqueryname) {
  const founderNameList = foundernames.split(", ");
  const contentList = founderNameList.map(fullName => {
    // 生成对应的查询slug
    const nameSlug = fullName.toLowerCase().replace(/\s+/g, '-');
    // 判断是否存在个人页面
    if (foundersqueryname.includes(nameSlug)) {
      const pageUrl = `${links.index}/about/contributors/${nameSlug}`;
      return `<a href="${pageUrl}">${fullName}</a>`;
    }
    return fullName;
  })
  // 直接返回拼接好的HTML字符串，不需要包裹在对象里
  return contentList.join(', ');
}

第二步：正确渲染HTML字符串 #

不要用JSON.stringify处理函数返回值，根据你使用的技术栈选择对应的原生HTML插入方式即可：

• 原生JS：使用innerHTML属性插入内容

  document.getElementById('founder-container').innerHTML = founderslinked(namesoffounders, queryoffounders)
  

• Vue：使用v-html指令

  <div v-html="founderslinked(namesoffounders, queryoffounders)"></div>
  

• React：使用dangerouslySetInnerHTML属性

  <div dangerouslySetInnerHTML={{
    __html: founderslinked(namesoffounders, queryoffounders)
  }}></div>
  

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