如何使用 jQuery 和 XRegExp 检测文本语言以正确显示混合的 RTL 和 LTR 文本
How to detect text language with jQuery and XRegExp to display mixed RTL and LTR text correctly
我正在尝试在 WordPress 站点中显示 Twitter 提要。我的客户用英语和阿拉伯语发推文,有时用两种语言的组合。我需要检测语言并将 class 'rtl' 添加到阿拉伯语推文以及那些内容主要为阿拉伯语的推文。我正在使用剥离 Twitter iso_language_code 元数据的插件。
几年前在以前的开发站点上尝试此操作时,我记得成功使用了此处找到的 Tristan 解决方案的变体:
How to detect that text typed in text-area is RTL
不幸的是,它似乎不再起作用了。
Tristan 的 jsfiddle 也不再有效。
我正在使用这个资源:
http://cdnjs.cloudflare.com/ajax/libs/xregexp/2.0.0/xregexp-min.js
和这个脚本:
jQuery(document).ready(function($) {
$('p').each(function() {
if(isRTL($(this).text()))
$(this).addClass('rtl');
});
function isRTL(str) {
var isArabic = XRegExp('[\p{Arabic}]');
var isLatin = XRegExp('[\p{Latin}]');
var partLatin = 0;
var partArabic = 0;
var rtlIndex = 0;
var isRTL = false;
for(i=0;i<str.length;i++){
if(isLatin.test(str[i]))
partLatin++;
if(isArabic.test(str[i]))
partArabic++;
}
rtlIndex = partArabic/(partLatin + partArabic);
if(rtlIndex > .5) {
isRTL = true;
}
return isRTL;
}
});
谁能帮我解决我哪里出错了?
非常感谢,
菲尔
更新
我已经设法使部分解决方案起作用:
jQuery(document).ready(function($) {
var arabic = /[\u0600-\u06FF]/;
$('p').each(function() {
if (arabic.test($(this).text())) {
$(this).addClass( "rtl" ).attr('style','text-align:right;direction:rtl');
}
else {
$(this).addClass( "ltr" ).attr('style','text-align:left;direction:ltr');
}
});
});
提前致歉 - 我是这方面的初学者。
我在这里做了一个 jsfiddle:
http://jsfiddle.net/philnicholl/4xn6jftw
如果文本全是阿拉伯语或全是英语,这会起作用,但英语推文中的一个阿拉伯语单词会把事情搞砸。
奇怪的是,当我将这个脚本添加到真实世界的 WordPress 测试中时,它产生的结果与我想要的完全相反,因为在阿拉伯文段落和推文中,被赋予了 LTR class 以及样式和英文文本给定 RTL。
反转 if else 给出正确的结果。
如有任何帮助,我们将不胜感激。
再次感谢。
菲尔
如果您使用的是 wordpress,我建议另一种解决方案,您可以在 header.php 的头部或 [= 的末尾分配变量26=] 文件
您可以通过检查 wordpress 函数来分配新变量 is_rtl()
示例:
js代码在header.php或footer.php之间
我正在尝试在 WordPress 站点中显示 Twitter 提要。我的客户用英语和阿拉伯语发推文,有时用两种语言的组合。我需要检测语言并将 class 'rtl' 添加到阿拉伯语推文以及那些内容主要为阿拉伯语的推文。我正在使用剥离 Twitter iso_language_code 元数据的插件。
几年前在以前的开发站点上尝试此操作时,我记得成功使用了此处找到的 Tristan 解决方案的变体:
How to detect that text typed in text-area is RTL
不幸的是,它似乎不再起作用了。
Tristan 的 jsfiddle 也不再有效。
我正在使用这个资源:
http://cdnjs.cloudflare.com/ajax/libs/xregexp/2.0.0/xregexp-min.js
和这个脚本:
jQuery(document).ready(function($) {
$('p').each(function() {
if(isRTL($(this).text()))
$(this).addClass('rtl');
});
function isRTL(str) {
var isArabic = XRegExp('[\p{Arabic}]');
var isLatin = XRegExp('[\p{Latin}]');
var partLatin = 0;
var partArabic = 0;
var rtlIndex = 0;
var isRTL = false;
for(i=0;i<str.length;i++){
if(isLatin.test(str[i]))
partLatin++;
if(isArabic.test(str[i]))
partArabic++;
}
rtlIndex = partArabic/(partLatin + partArabic);
if(rtlIndex > .5) {
isRTL = true;
}
return isRTL;
}
});
谁能帮我解决我哪里出错了?
非常感谢,
菲尔
更新
我已经设法使部分解决方案起作用:
jQuery(document).ready(function($) {
var arabic = /[\u0600-\u06FF]/;
$('p').each(function() {
if (arabic.test($(this).text())) {
$(this).addClass( "rtl" ).attr('style','text-align:right;direction:rtl');
}
else {
$(this).addClass( "ltr" ).attr('style','text-align:left;direction:ltr');
}
});
});
提前致歉 - 我是这方面的初学者。
我在这里做了一个 jsfiddle:
http://jsfiddle.net/philnicholl/4xn6jftw
如果文本全是阿拉伯语或全是英语,这会起作用,但英语推文中的一个阿拉伯语单词会把事情搞砸。
奇怪的是,当我将这个脚本添加到真实世界的 WordPress 测试中时,它产生的结果与我想要的完全相反,因为在阿拉伯文段落和推文中,被赋予了 LTR class 以及样式和英文文本给定 RTL。
反转 if else 给出正确的结果。
如有任何帮助,我们将不胜感激。
再次感谢。
菲尔
如果您使用的是 wordpress,我建议另一种解决方案,您可以在 header.php 的头部或 [= 的末尾分配变量26=] 文件
您可以通过检查 wordpress 函数来分配新变量 is_rtl()
示例: js代码在header.php或footer.php之间