英文网站的【右单引号】显示问题

背景

最近浏览一个英文网站，发现里面的单引号不是'（ASCII单引号），而是'（右单引号），而且是全角版本，导致渲染出来这种效果

本人有点强迫症，想解决这个问题。

问题根因

现在网站的字符基本都是unicode编码，ASCII单引号的unicode编码是U+0027，右单引号的unicode编码是U+2019，然后右单引号在不同语言的编码相同，但字体不同，英文版是半角，中文版是全角，导致显示异常。具体可看豆瓣这篇文章

尝试1，更换语言、字体

更换浏览器的优先语言为英语，目标网站的显示问题没有改善。

更换操作系统的语言为英语，目标网站的显示问题解决了，但其他常用网站的字体全都变得很难看，放弃该方案。

尝试2，替换HTML文本内容

使用油猴等插件

折腾过各种权限问题后卡在没有运行中的脚本一步，放弃

使用浏览器自带的开发者工具

在console里先输入允许粘贴再粘贴下面几行代码，就能将右单引号转成ASCII单引号了，但显示出来的竟然是半角右单引号😓

js 复制代码

let elements = document.querySelectorAll('p');

elements.forEach(element => {
    var text = element.innerText;
    element.innerText = text.replaceAll(''', '\'');
});

运行后发现文章中的公式全乱了，定位一番发现是p元素还包含了span元素，span元素里又包含了p元素，因此不能简单的修改p元素，而要只修改p元素中的text节点：

js 复制代码

let ps = document.querySelectorAll('p');

ps.forEach(p => {
	nodes = p.childNodes;
	nodes.forEach(node => {
		if (node.nodeType == Node.TEXT_NODE) {
			const t = node.wholeText;
			node.data = t.replaceAll(''', '\'');
		}
	});
});

再运行，公式也正常了

进一步优化

其实目标网站还存在2个问题：①双引号也不是ASCII双引号，而是左双引号和右双引号，如法炮制即可。②某些p元素带了个strong元素，这种只需要将p替换成strong即可。

待尝试3，指定目标网站的字体

目标网站指定了fontawesome字体，如果能指定其他包含半角右单引号的字体，就不用费劲修改内容了，可惜我不搞web好多年了，有空再去研究吧。

总结

C++创始人说编程语言只有挨骂的和没人用的2种，放到字符编码领域的unicode身上也适用吧。