2

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

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

问题是当我使用我添加到网站的谷歌网站翻译器时，span 标签会破坏单词并且谷歌翻译单独的部分而不是整个单词（“Questi”作为一个单词，“o”作为一个单词，和“n”作为一个词）。

我的问题是： 有没有办法让“谷歌网站翻译器”翻译整个单词，仍然让我为单个字符设置样式？

到目前为止我已经尝试过（没有运气）：

  1. 寻找其他样式化单个字符的方法。
  2. 寻找一种“挂钩”到某些谷歌翻译 javascript 函数的方法，以便我可以在翻译之前删除 span 标签。只要文本的翻译本身有效，在翻译的页面中不设置单个字符的样式是可以接受的。

提前感谢您，并感谢您提供了这个令人惊叹的网站，它最近对我帮助很大！

编辑：这是我用来在我的页面上包含“Google 网站翻译器”的代码：

<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>
4

2 回答 2

1

您可以使用 JavaScript 的 innerHTML 属性来获取文本区域内的文本，然后将所有出现的 of 替换为<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
}

类似的东西。

编辑： 根据新的细节；我的第一个建议是在 Google 上寻找发送和接收单词及其翻译的不同方式。一个给你一些自由的人。查看代码，看起来他们将来自 translate.google.com 的框的副本植入到您的页面中。

如果这不起作用，请点击源代码的链接并将那里的代码复制到您自己的文件中。修改该代码（这有点令人困惑）并将其放入您的站点。

于 2012-06-29T13:41:51.920 回答
1

由于:nth-letter()尚不可用（但我听说它即将推出），我将使用客户端脚本将所有 o 的颜色染成红色，并确保在翻译完成后触发它。

它可能会闪烁，但是如果没有额外的标记（这会破坏翻译器），就无法使用 css 来定位单个字符。

这是一个超级粗略的谣言网站供参考:)

于 2012-06-29T15:06:30.133 回答