如何使用 jQuery 和 XRegExp 检测文本语言以正确显示混合的 RTL 和 LTR 文本 [英] How to detect text language with jQuery and XRegExp to display mixed RTL and LTR text correctly

问题描述

我正在尝试在 WordPress 网站中显示 Twitter 提要.我的客户用英语和阿拉伯语发推文，有时还用两种语言的组合.我需要检测语言并将rtl"类添加到阿拉伯语推文以及内容主要为阿拉伯语的那些推文中.我正在使用一个插件来去除 Twitter iso_language_code 元数据.

I'm trying to display a Twitter feed in a WordPress site. My client tweets in English and in Arabic and sometimes in a combination of the two languages. I need to detect the language and add the class 'rtl' to Arabic tweets and also those tweets where the content is predominately in Arabic. I'm using a plugin which strips the Twitter iso_language_code metadata.

几年前在以前的开发站点上尝试此操作时，我记得成功地使用了此处找到的 Tristan 解决方案的变体:

When attempting this on a previous development site a few years ago, I remember successfully using a variation of Tristan's solution found here:

如何检测在 text-area 中输入的文本是 RTL

不幸的是，它似乎不再起作用了.

Unfortunately it no longer seems to work.

Tristan 的 jsfiddle 也不再有效.

Tristan's jsfiddle no longer works either.

我正在使用此资源:

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;
    }

    });

谁能帮我解决哪里出错了?

Can anyone help me with where I'm going wrong?

非常感谢，

菲尔

更新

我设法使部分解决方案起作用:

I've managed to get a partial solution working:

    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');
      }

    });

    });

我提前道歉 - 我是这方面的初学者.

My apologies in advance - I'm very much a beginner at this.

我在这里做了一个 jsfiddle:

I've done a jsfiddle here:

http://jsfiddle.net/philnicholl/4xn6jftw

如果文本全部为阿拉伯语或全部为英语，则此方法有效，但英语推文中的单个阿拉伯语单词会将事情搞砸.

This works if the text is all Arabic or all English but a single word of Arabic in an English tweet will mess things up.

奇怪的是，当我将这个脚本添加到真实世界的 WordPress 测试中时，它产生了与我想要的完全相反的结果，因为在阿拉伯语段落和推文中被赋予了 LTR 类，样式和英文文本被赋予了 RTL.

Bizarely, when I added this script to a real world WordPress test, it produced exactly the opposite result from what I wanted, as in Arablic paragraphs and tweets were given the LTR class and styling and English text given RTL.

反转 if else 会得到正确的结果.

Reversing the if else gives the right result.

任何帮助将不胜感激.

再次感谢.

菲尔

推荐答案

可以使用正则表达式判断是否只包含阿拉伯字母

You can use regular expression to determine if contain only Arabic letters

$('p').each(function() {
    if(isRTL($(this).text()))
        $(this).addClass('rtl');
});

function isRTL(str) {
    return /^[\u0600-\u06FF]/.test(str);
}

p.rtl {
    direction: rtl;
}
p.ltr {
    direction: ltr;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Hello World</p>
<p>مرحبا بالعالم</p>
<p>Hello World مرحبا بالعالم</p>

这篇关于如何使用 jQuery 和 XRegExp 检测文本语言以正确显示混合的 RTL 和 LTR 文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！