Leaflet弹窗a标签内联JS引号冲突引发语法错误如何解决

开发基于Leaflet框架的地图弹窗功能时，触发报错：Uncaught SyntaxError: expected expression, got ';'，部分场景还会触发Unexpected end of input类错误。
需求为实现带可点击文本的弹窗：点击弹窗内文本时执行JS逻辑，完成stopno、nuscode两个变量的赋值。其中GeoJSON数据中feature.properties.nuscode字段为字符串类型，赋值时需要用引号包裹字符串值，在<a>标签的onClick属性中编写内联JS时，因引号嵌套逻辑错误导致语法异常。
原有错误实现代码如下：

var popupContent = '<a href="#tableofresults" class="modal-trigger" onClick="stopno='+feature.properties.busstopcode+'; nuscode=&quot;'+feature.properties.nuscode+'&quot;;&quot;>Click me!</a>';

原代码的引号拼接逻辑完全混乱：onClick属性本身以双引号作为边界，内部给nuscode赋值时直接插入未做正确转义的双引号，导致HTML解析器提前截断onClick属性值，最终属性内残留的分号、多余引号被JS引擎解析时触发语法错误。

方案1：最小改动修复原有内联写法 #

利用「HTML双引号属性内部可直接使用未转义单引号」的规则，调整字符串拼接逻辑，onClick内部的JS字符串用单引号包裹，和外层属性的双引号做区分，同时修正分号、引号的位置。
修正后的代码如下：

var popupContent = '<a href="#tableofresults" class="modal-trigger" onClick="stopno=' + feature.properties.busstopcode + '; nuscode=\'' + feature.properties.nuscode + '\';">Click me!</a>';

拼接完成后渲染出的HTML标签结构如下，JS语法完全合法：

<a href="#tableofresults" class="modal-trigger" onClick="stopno=1001; nuscode='NUS0023';">Click me!</a>';

方案2：事件委托写法（推荐，彻底规避引号问题） #

内联JS拼接本身容易出现转义问题，还存在XSS风险，更推荐利用Leaflet的弹窗事件做事件委托，完全不写内联脚本，从根源避免引号嵌套问题：

• 弹窗内容只保留DOM结构，把需要的参数存在data-*自定义属性上，不绑定内联事件
• 监听地图的popupopen事件，等弹窗渲染到DOM后再给目标元素绑定点击事件，从自定义属性上取值完成赋值
  实现代码如下：

// 绑定弹窗时只渲染纯DOM结构
var popupContent = '<a href="#tableofresults" class="modal-trigger" data-stopno="'+feature.properties.busstopcode+'" data-nuscode="'+feature.properties.nuscode+'">Click me!</a>';

// 全局监听弹窗打开事件，统一绑定点击逻辑
map.on('popupopen', function(e) {
  var popupEl = e.popup.getElement();
  var triggerLink = popupEl.querySelector('.modal-trigger');
  if (triggerLink) {
    triggerLink.addEventListener('click', function() {
      // 从自定义属性取值赋值，无需处理引号转义
      window.stopno = triggerLink.dataset.stopno;
      window.nuscode = triggerLink.dataset.nuscode;
      // 此处可继续编写后续触发模态框的业务逻辑
    });
  }
});

这种写法即使nuscode字段值本身包含单引号、双引号等特殊字符，也不会触发语法错误，稳定性远高于内联事件拼接的写法。

内容的提问来源于stack exchange，提问作者Person Needing Help