带有css样式的单词的Google翻译

Question

在一个正在进行的网站开发项目中，我使用html span标记和css将特定可见文本区域中的所有'o‘字符样式设置为红色，如下所示：

Questi<span class="redcharacter">o</span>n.
.redcharacter { color: red; }

问题是，当我使用我添加到网站上的google网站翻译时，span标记打破了单词，google翻译了单独的部分，而不是整个单词("Questi“作为一个单词，"o”作为一个单词，"n“作为一个单词)。

我的问题是：有没有办法让"google网站翻译器“翻译整个单词，还让我为个人角色设计风格呢？

到目前为止，我已经尝试过(没有运气)：

1. 寻找其他方式的造型个别字符。
2. 搜索一种方式“挂钩”到某些谷歌翻译javascript函数，以便我可以删除之前的跨度标签翻译。只要文本本身的翻译有效，就可以接受在翻译页面中不使用单个字符的样式。

感谢您的提前，并感谢您的这个惊人的网站，它帮助了我非常最近！

编辑:这是我用来在我的网页上包含“谷歌网站翻译”的代码：

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element');}</script>
<div id="google_translate_element"></div>

Answer 1

您可以使用JavaScript的innerHTML属性获取文本区域内的文本，然后将所有出现的<span class="redcharacter">o</span>替换为字母o，然后将文本发送出去翻译。

function translate(){
    text = document.getElementById('myTxtArea').innerHTML;
    parsedText = text.replace("<span class="redcharacter">o</span>","o");
    // send parsedText to Google Translate...
    // do something with what is returned
}

差不多吧。

编辑:根据新的细节，；我的第一个建议是寻找一种不同的发送和接收单词及其翻译的方法。给你一些自由。看一看代码，它看起来就像他们把一个从translate.google.com到你的页面中的盒子的副本。

如果不起作用，请按照指向源代码的链接，将代码复制到您自己的文件中。修改代码(这是一种令人困惑的阅读)，并将其放到您的站点中。

Answer 2

由于:nth-letter()尚未可用(但我听说它即将到来)，我将使用客户端脚本将所有o的颜色涂成红色，并确保在翻译完成后启动它。

它可能会闪烁，但没有额外的标记(这破坏了翻译程序)，就无法用css (尚未)来针对单个字符。

下面是一个非常粗略的谣言网站供参考:)