jQuery在iOS设备上动态样式失效问题排查

看起来你的代码在PC和Android端正常工作，但在iOS上完全失效，主要是两个关键问题导致的，我们逐个拆解分析：

1. 正则后顾断言的兼容性问题 #

你这段代码里的正则使用了ES2018才引入的正向后顾断言(?<=\n)：

dialog.html(function(i, v) {
  return v.replace(/(?<=\n)\s*(\(.*?\)).*?/g, '<span class="wi-remark">$&</span>')
});

iOS Safari在版本12.1之前（对应iOS 12.1及更早系统）完全不支持这种后顾断言语法。当JS引擎遇到不认识的正则语法时，会直接抛出错误，导致整个脚本终止执行——这就是iOS上完全没效果的核心原因。

修复方案 #

替换掉后顾断言，改用兼容性更好的写法，比如拆分字符串逐行处理：

dialog.html(function(i, v) {
  return v.split('\n').map(line => {
    // 匹配以括号开头的行
    if (/^\s*\(.*?\)/.test(line)) {
      return `<span class="wi-remark">${line}</span>`;
    }
    return line;
  }).join('\n');
});

或者调整正则，用捕获组替代后顾断言：

dialog.html(function(i, v) {
  // 捕获换行符，替换时保留原换行
  return v.replace(/(\n)\s*(\(.*?\)).*?/g, '$1<span class="wi-remark">$&</span>');
});

2. 代码中的语法/逻辑错误 #

你的脚本存在两个细节错误，iOS的JS引擎容错性比Chrome/Android WebView差，可能直接导致脚本崩溃：

• 多余的闭合括号：代码最后多了一个});，jQuery(document).ready()已经用一个});闭合，额外的括号会触发语法错误。
• 类选择器缺失圆点：$("wi-remark:contains(MORE)")应该写成$(".wi-remark:contains(MORE)")——没有圆点的话会查找<wi-remark>标签，而不是类名为wi-remark的元素。

修复后的完整脚本示例：

var $ = jQuery.noConflict();
$(document).ready(function() {
  var dialog = $("p:has(strong)").addClass("wi-dialog");
  var chapter = $("p:has(ins)").addClass("wi-chapter");
  
  dialog.html(function(i, v) {
    return v.split('\n').map(line => {
      if (/^\s*\(.*?\)/.test(line)) {
        return `<span class="wi-remark">${line}</span>`;
      }
      return line;
    }).join('\n');
  });
  
  var more = $(".wi-remark:contains(MORE)").addClass("wi-more").removeClass("wi-remark");
  
  var p = $('p:not(.wi-dialog,.wi-chapter)');
  p.filter(function() {
    return (/^[0-9.]+$/).test($(this).html());
  }).addClass("wi-number");
  
  p.filter(function() {
    return (/^(THE END)+$/).test($(this).html());
  }).addClass("wi-end");
});

额外验证建议 #

如果修复后仍有问题，可以：

• 打开iOS Safari的开发者工具（需连接Mac）查看控制台错误信息，直接定位剩余问题。
• 验证文本中的换行符是否统一为\n，避免iOS端因换行符格式差异导致正则匹配失效。

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