nk2028 / opencc-js

The JavaScript version of Open Chinese Convert (OpenCC)
https://www.npmjs.com/package/opencc-js
MIT License
240 stars 22 forks source link

HTML 转换时手动跳过部分元素的实现 #6

Closed BillZhou233 closed 3 years ago

BillZhou233 commented 3 years ago

预置的 HTMLConverter 无法处理下面这种“简繁转换菜单”的情况:

<html lang="zh-hans">
...
<a href="javascript:void(0)" lang="zh-hans" onclick="setConvert(false)">简体</a>
<a href="javascript:void(0)" lang="zh-hant" onclick="setConvert(true)">繁體</a>
...
</html>

常见的 UX 设计方案当中,这种“简繁转换菜单”中菜单项使用的文字应该和对应的变体一致,但是转换器(在这个示例中是简体转繁体)会将“简体”一项也转换成繁体。

我个人的解决方法是在 _inner 函数中原有的跳过内嵌 JS / CSS 处加入一个类名检测:

/* Do not convert these elements */
if (currentNode.nodeType == Node.ELEMENT_NODE && currentNode.classList.contains('ignore-opencc')) return;
...

此时转换器检测到带有 ignore-opencc 类的元素就会跳过后续的转换,在网页中只需要加入同样的类名即可指定无需转换的部分。

不过,因为本人的能力实在有限,不知道这样的解决方法效率如何(毕竟把所有元素都 DFS 一遍还要检测类名觉得时间复杂度有点大),并且也不太会用 PR,就先发 Issue 了。

ayaka14732 commented 3 years ago

感谢提出!已经解决了~

我把这段代码加在了前面,因为前面有一段改变 lang 属性的代码,应该要先判断 ignore-opencc,确认不需 ignore 之后再改变 lang 属性。

这样改对时间复杂度应该没有影响。