How can I display English and Persian words on a web page in different colours using JavaScript?

Question

I have an HTML page that contains English words and Persian words. I want to know how can I detect English words and change the color of them, and detect Persian words and change the color of them to a different color.

These words are dynamic and can be changed. I want to detect them by jQuery or JavaScript and change the colors.

For example, given this text:

Hi سلام بر this این text can be برای اولین ...

I want to show these words in red:

Hi, This, Text, can, be,

and these words in blue:

بر, سلام, این, برای, اولین

what do you mean by words, are you looking for only alphabet characters — Arun P Johny, Jul 08 '13 at 12:21
@loxxy: I think it's okay to ask questions where you don't know where to start. e.g. if the OP has no idea how to go about differentiating between English and Persian words. (I'm not sure if that is the case, as the question doesn't make it clear.) — Paul D. Waite, Jul 08 '13 at 12:23
See http://stackoverflow.com/questions/1501007/how-can-i-use-jquery-to-style-parts-of-all-instances-of-a-specific-word for general-purpose full-page regex text replace. — bobince, Jul 08 '13 at 12:30
@PaulD.Waite I agree. Just that the comment came at an age when OP didn't even add an example. — loxxy, Jul 08 '13 at 12:33
@bobince : is there any example on jsfiddle.net ? or can you provide me an example on jsfiddle ? thank you ... — Persian., Jul 08 '13 at 12:38

jantimon · Accepted Answer · 2013-07-08T14:16:40.207

8

What about using the char code?

English letters are within the first 255 chars but Persian letters aren't.

html

<p>Hi سلام بر this این text can be برای اولین.</p>

javascript

jQuery(function($) {
  $("p").each(function(){
        this.innerHTML = $(this).text().replace(/\S+/g, function (word) {
            var span = document.createElement("span");
            span.className = "word ";
            span.className += isEnglish(word) ? 'english' : '';
            span.className += isPersian(word) ? 'persian' : '';
            span.appendChild(document.createTextNode(word));
            return span.outerHTML;
        });
    });

    function isEnglish(word){
      return word.charCodeAt(0) < 255;
    }

    function isPersian(word){
      return word.charCodeAt(0) > 255;
    }
});

jsFiddle

edited Jul 08 '13 at 14:16

answered Jul 08 '13 at 12:39

jantimon

36,840
23
122
185

I put body tag instead of p tag. it destroys my page code. why ? – Persian. Jul 08 '13 at 12:57
@Persian. Try this jsfiddle http://jsfiddle.net/sWpgg/4/ it takes care of elements with children – jantimon Jul 08 '13 at 12:58
wow, it works . I added body, div, p, a tags :D and it works now. Thank you very much ( edit your answer please , maybe my Iranian friends need this code.) – Persian. Jul 08 '13 at 13:09
Note `innerText` is IE-only - use jQuery `text()` instead. Note because you are reading from plain-text but writing to markup (`innerHTML`), you'll mangle `<` and `&` characters in the text (with potential XSS security implications). – bobince Jul 08 '13 at 13:24

bobince · Answer 2 · 2013-07-08T13:46:17.950

or can you provide me an example?

Well OK:

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findText(element, pattern, callback) {
    var nonHtmlTags= {textarea:1, option:1, script:1, style:1, svg:1, math:1};
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1 && !(child.tagName in nonHtmlTags)) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

// Find text and wrap with span elements
//
function highlightText(element, pattern, className) {
    findText(document.body, pattern, function(node, match) {
        var span= document.createElement('span');
        span.className= className;
        node.splitText(match.index+match[0].length);
        span.appendChild(node.splitText(match.index));
        node.parentNode.insertBefore(span, node.nextSibling);
    });
}

highlightText(document.body, /[a-z]+/gi, 'english-word');
highlightText(document.body, /[\u0600-\u06FF]+/gi, 'persian-word');

Note the English and Persian regexps are very naïve and will fail for unusual characters, like Latin ï or Arabic ﷽. Coming up with a more complete expression is left as an exercise for the abecedarian.

How can I display English and Persian words on a web page in different colours using JavaScript?

2 Answers2