Question

我有一个包含英语单词和波斯语单词的HTML页面。我想知道如何检测英语单词并改变它们的颜色，并检测波斯语单词并将它们的颜色更改为不同的颜色。

这些词是动态的，可以改变。我想通过jQuery或JavaScript检测它们并更改颜色。

例如，鉴于此文：

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

我想用红色显示这些单词：

Hi, This, Text, can, be,

这些字是蓝色的：

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

Answer 1

使用char代码怎么样？

英文字母在前255个字母内，但波斯文字母不在。

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

Answer 2

或者你能举个例子吗？

好吧：

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

请注意，英语和波斯语regexp非常天真，并且会因为拉丁语ï或阿拉伯语﷽等异常字符而失败。提出一个更完整的表达是留给初学者的练习。

如何使用JavaScript在网页上以不同颜色显示英语和波斯语？

2 个答案: