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

问题描述

我正在尝试在WordPress网站中显示Twitter feed.我的客户用英语和阿拉伯语(有时甚至是两种语言的组合)发推文.我需要检测语言并将"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:

如何检测在文本区域中键入的文本是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.

Bizarely，当我将此脚本添加到现实世界的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屋！