Javascript引号转义问题：构建关键词按钮列表时渲染异常

方案一：字符串拼接的正确引号转义 #

如果坚持用字符串拼接生成<a>标签，需要严格处理嵌套引号的转义逻辑：

• 外层HTML属性用单引号，函数参数用双引号时，要转义参数内容里的双引号；反之同理。

示例代码：

const keywords = ['前端', 'JavaScript', 'jQuery'];
const container = $('#keyword-container');

keywords.forEach(keyword => {
  // 转义关键词中的双引号，避免破坏HTML结构
  const escapedKeyword = keyword.replace(/"/g, '\\"');
  // 外层onclick用单引号，参数用转义后的双引号
  const linkHtml = `<a href="javascript:void(0)" onclick='filterOnKeyword("${escapedKeyword}")'>${keyword}</a>`;
  container.append(linkHtml);
});

方案二：推荐的现代实现方式（完全避免引号问题） #

直接通过jQuery创建DOM元素并绑定事件，无需拼接字符串，从根源上解决引号混乱：

const keywords = ['前端', 'JavaScript', 'jQuery'];
const container = $('#keyword-container');

keywords.forEach(keyword => {
  // 创建<a>元素并设置属性
  const $link = $('<a>', {
    href: 'javascript:void(0)',
    text: keyword
  });
  // 直接绑定click事件，传递参数
  $link.on('click', () => filterOnKeyword(keyword));
  // 添加到容器
  container.append($link);
});

方案三：模板字符串+事件委托（适合大量关键词） #

如果需要批量渲染，可结合模板字符串和事件委托，通过data-*属性存储参数：

const keywords = ['前端', 'JavaScript', 'jQuery'];
const container = $('#keyword-container');

// 批量渲染不带onclick的链接
const linksHtml = keywords.map(keyword => 
  `<a href="javascript:void(0)" data-keyword="${keyword}">${keyword}</a>`
).join('');
container.html(linksHtml);

// 绑定事件委托，统一处理点击
container.on('click', 'a', function() {
  const keyword = $(this).data('keyword');
  filterOnKeyword(keyword);
});

这种方式不仅避免引号问题，还能减少事件绑定数量，提升性能。

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