如何使用JS结合Span实现链接隐藏？现有代码相关问题咨询

首先，你的代码里最直接的问题是demoer对象的键和span的title不匹配——demoer的键是pofkepfisodijfsodijf，但你的span title是Demos，点击时自然拿不到对应的字符串值。除此之外，硬编码的字符替换逻辑在多场景下会非常难维护，下面是针对这些问题的改进方案：

1. 先修复核心的键值匹配问题 #

先把demoer对象的键改成和span title对应的名称，这样点击时能正确获取到加密后的链接字符串：

// 用有意义的键名对应span的title
const demoer = {
  'Demos': 'hd@j|m' // 对应你的<span title="Demos">Demos</span>
};

2. 优化链接解密逻辑（适配多场景） #

原来的逐个字符替换太零散，多场景使用时要修改一堆replace，建议把替换规则做成一个配置对象，这样新增或修改规则都更方便：

const demoer = {
  'Demos': 'hd@j|m',
  'AnotherPageLink': 'ab@cd|ef' // 多场景新增链接直接加在这里
};

// 统一替换规则，可灵活扩展
const replaceRules = {
  'h': 'http://',
  'm': 'mloiqsaeranol',
  'd': 'demo',
  'j': 'johanbleuzen.fr',
  '@': '.',
  '|': '/'
};

$('span', '#bottom').bind('click', function(){
  const key = $(this).attr('title');
  // 先检查是否存在对应的加密字符串，避免控制台报错
  if (!demoer[key]) {
    console.warn(`No link found for title: ${key}`);
    return;
  }
  
  let str = demoer[key];
  // 循环执行所有替换规则
  Object.entries(replaceRules).forEach(([from, to]) => {
    str = str.replaceAll(from, to);
  });
  
  window.open(str, '_blank'); // 建议指定_blank，避免空白窗口的参数问题
});

这里用replaceAll代替单次replace（如果需要兼容旧浏览器，可以用new RegExp(from, 'g')配合replace），同时增加了键值存在性检查，避免无意义的报错。

3. 更友好的多场景扩展方案 #

如果你的多场景是指不同页面或不同区域的span，还可以给span加自定义属性（比如data-link-key）来替代title，这样title可以保留显示用的说明文本，不影响用户体验：

<!-- 用data属性存储键名，title可以正常显示提示文本 -->
<span title="查看演示项目" data-link-key="Demos">Demos</span>

对应的JS修改：

// 只绑定带有data-link-key属性的span
$('span[data-link-key]', '#bottom').bind('click', function(){
  const key = $(this).data('link-key');
  // 后续逻辑和上面一致...
});

4. 避免全局变量污染（适合多场景嵌入） #

把代码封装成一个立即执行函数，避免全局变量冲突，方便在多个页面复用：

(function($) {
  const demoer = {
    'Demos': 'hd@j|m',
    'AnotherPageLink': 'ab@cd|ef'
  };

  const replaceRules = {
    'h': 'http://',
    'm': 'mloiqsaeranol',
    'd': 'demo',
    'j': 'johanbleuzen.fr',
    '@': '.',
    '|': '/'
  };

  $('span[data-link-key]', '#bottom').on('click', function(){
    const key = $(this).data('link-key');
    if (!demoer[key]) {
      console.warn(`No link found for key: ${key}`);
      return;
    }
    
    let str = demoer[key];
    Object.entries(replaceRules).forEach(([from, to]) => {
      str = str.replaceAll(from, to);
    });
    
    window.open(str, '_blank');
  });
})(jQuery);

这样修改后，不管是新增链接、更换加密规则，还是在不同页面复用代码，都能更灵活地维护，也解决了原代码中键不匹配的核心问题。

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