JavaScript字符串替换'&zwj'无效及HTML下拉框iPhone适配问题

1. JavaScript中string replace替换&zwj不生效的问题 #

这个问题大概率是没用到全局替换，或者匹配的内容不对，我给你拆解下原因和解决办法：

核心原因 #

JavaScript的replace()方法如果第一个参数是字符串，只会替换第一个匹配到的内容。如果你的目标字符串里有多个&zwj，自然只会替换第一个，看起来像是“不生效”。另外还要注意你要替换的是HTML实体字符串，还是实际的Unicode零宽连字符。

解决方案 #

• 全局替换HTML实体字符串：用正则表达式加g标志，或者用replaceAll()（ES2021及以上环境支持）

  // 替换所有的&zwj（不带分号）
  const originalStr = "test‍foo‍bar";
  // 方法1：正则全局替换
  const result1 = originalStr.replace(/&zwj/g, "");
  // 方法2：用replaceAll（更简洁，需要环境支持ES2021+）
  const result2 = originalStr.replaceAll("&zwj", "");
  
  // 如果要替换的是完整的‍（带分号），只需要修改匹配内容
  const result3 = originalStr.replace(/‍/g, "");
  

• 如果是替换实际的零宽连字符（U+200D）：直接匹配Unicode字符

  const result = originalStr.replace(/\u200D/g, "");
  

2. iPhone上select的option前 不生效的问题 #

iOS Safari对原生select的option样式支持非常有限，默认会忽略HTML空格实体，这是系统浏览器的固有限制，给你两个可行的解决方案：

方案1：用Unicode空格字符代替HTML实体 #

直接使用和 等价的Unicode全角空格（\u2003）或者非断空格（\u00A0），iOS Safari能正确识别这些字符：

<select>
  <option value="0399">&#x2003;Fruits</option>
  <option value="0359">&#x2003;&#x2003;Banana</option>
  <option value="0359">&#x2003;&#x2003;Apple</option>
  <option value="0359">&#x2003;&#x2003;Kiwi</option>
</select>

如果是动态生成option，在JavaScript里直接写字符：

const option = document.createElement('option');
option.value = '0359';
option.textContent = '\u2003\u2003Banana';
selectElement.appendChild(option);

方案2：自定义下拉菜单（彻底解决样式兼容问题） #

如果原生select的限制太多，推荐用HTML+CSS+JS模拟自定义下拉菜单，这样样式在所有设备上都能完全统一：

<div class="custom-select">
  <div class="select-header" data-selected="">选择分类</div>
  <ul class="select-list">
    <li class="select-item" data-value="0399">&emsp;Fruits</li>
    <li class="select-item" data-value="0359">&emsp;&emsp;Banana</li>
    <li class="select-item" data-value="0359">&emsp;&emsp;Apple</li>
    <li class="select-item" data-value="0359">&emsp;&emsp;Kiwi</li>
  </ul>
</div>

然后添加基础CSS控制样式和展开逻辑，再用JavaScript处理点击选择的交互。这种方式完全脱离原生select的限制，缩进效果在iPhone上能完美显示。

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