TextArea LTR/RTL

2019-07-24 12:42发布

问题:

I have a simple html textarea, the body has RTL style and so textarea inherits the style from body. So the problem is following.

Problem: I have to display the following text into text area using $("#myTextArea").val("text from an ajax result comes here").

The text is following,

پاکستان کا کل رقبہ 796096-0-0 مربع کلو میٹرز ہے۔

and the rest of the text is similar and takes several lines. Now the number in the Urdu text is actually 796096-0-0 but it is displayed reverse. There are several such numbers throughout the text. Please tell me a way that I could display the numbers as LTR and the rest of the text as RTL as usual.

Thanks.

回答1:

You can use RegEx to search for the number. If found you can reverse and then replace it.

Example:

var textAreaValue = "پاکستان کا کل رقبہ 796096-0-0 مربع کلو میٹرز ہے۔";

// This regex string means to match a digit, dash, digit, dash, then 6 digits.
var matches = textAreaValue.match("[0-9]{6}\-[0-9]-[0-9]");

if(matches) { // Check that a match happened (multiple allowed)
    for(i = 0; i < matches.length; i++) {
        var reverseValue = matches[i].split("").reverse().join("");
        textAreaValue = textAreaValue.replace(matches[i], reverseValue);
    }
}

// textAreaValue is now پاکستان کا کل رقبہ 0-0-690697 مربع کلو میٹرز ہے۔
$("#myTextArea").val(textAreaValue);


回答2:

Try to give your text area ltr . Not inherits . May works



回答3:

// str = "پاکستان کا کل رقبہ 796096-0-0 مربع کلو میٹرز ہے۔";
str = str.replace(/([-0-9]+)/g, "\u202a$1\u202c");

You'll have to place this string in a container that has the CSS attribute direction set to rtl, or you'll have to add a "\u202E" character to the beginning, otherwise the sections appeared in reverse order (but in the correct direction).

These are Unicode direction control characters:

  • U+202A: left-to-right embedding
  • U+202C: pop-directional-formatting (basically end of embedding)
  • U+202E: right-to-left override

I've been using this as a reference: http://www.iamcal.com/understanding-bidirectional-text/