javascript - 处理 HTML 中的多语言段落字体样式

Question

我有一个网页，主要由波斯语内容组成，在某些段落中有一个或一些英文单词。内容是自动生成的，我无法从我的 HTML 源代码中更改它。 我需要检测这些英文单词在哪里，然后给它们 font-size:xx;前者的原因是我的英文字体——我没有选择并且改变它是不可能的——看起来比我的波斯字体大而且它必须比我分配给波斯的字体大小小一些像素每页的字体。 这是一个例子:

<span class="common">سلام دنیا (helo world)</span>

整个跨度采用以下样式:

.common{
    font-size:26px;
    font-family:'Arial'; 
}

而且我无法为“hello world”部分分配不同的字体大小。

由于页面内容是通过从数据库获取数据的脚本代码生成的，我无法手动为英文单词提供任何嵌入样式，比如用 <em lang="en"></em> 包围它们标签。 有什么方法可以自动检测英语单词并赋予它们样式 - 也许通过分配一个类？ -

我们将不胜感激任何帮助尝试。

Answer 1

您可以通过搜索英文字符序列并用您自己的 span 包装这些序列来操作 DOM。

这不是完整的解决方案，但您可以这样做:

document.querySelectorAll("span").forEach(function(el){
  el.innerHTML = el.innerText.replace(/[a-z]+/g, '<span class="uncommon">$&</span>');
});

.common{
    font-size:26px;
    font-family:'Arial'; 
}

.uncommon{
  font-size:36px;
  font-weight: 600;
}

<span class="common">سلام دنیا (helo world)</span>