HTML: Detect Unicode and Apply Class

Question

Is there a way to detect the unicode of the character in the html file and apply class to the nearest div/span?

For example, if there is a div containing English (Latin Characters), I want to apply 'en' class to that div. And if there is a div containing Japanese characters, I want apply 'jp' class to that div.

(if there are both then, I guess both classes can be applied).

can you use jquery? also do you nedd only japan/english or all languges? — לבני מלכה, Apr 11 '19 at 08:08
It is on Grails application and I am working on pdf rendering of that html file. I guess I can work with javascript but I would much prefer if its native grails functionality or at least in java/groovy. — seokhoonlee, Apr 11 '19 at 08:14
And it would be good to scale to all languages but for now its jap and eng — seokhoonlee, Apr 11 '19 at 08:15

לבני מלכה · Accepted Answer · 2019-04-11T08:44:37.023

2

Use divs[i].textContent.match

Use unicode range

For japanese unicode

var divs = document.querySelectorAll("div");

for (var i = 0; i < divs.length; ++i) {
    if(divs[i].textContent.match(/[\u0020-\u007F]+/g)){
       divs[i].classList.add('eng');    
    }
    else if(divs[i].textContent.match(/[\u3041-\u3096]+/g)){
       divs[i].classList.add('jp');    
    }
}

.eng{
color:red;
}

.jp{
color:blue;
}

<div>english</div>
<div>良い一日を</div>

EDIT

to query for all tags in page use: document.querySelectorAll("body *");

    var elements = document.querySelectorAll("body *");

    for (var i = 0; i < elements.length; ++i) {
        if(elements[i].textContent.match(/[\u0020-\u007F]+/g)){
           elements[i].classList.add('eng');    
        }
        else if(elements[i].textContent.match(/[\u3041-\u3096]+/g)){
           elements[i].classList.add('jp');    
        }
    }

    .eng{
    color:red;
    }

    .jp{
    color:blue;
    }

<div>english</div>
<div>良い一日を</div>
<span>english span</span>
<label>良い一日を</label>

edited Apr 11 '19 at 08:44

answered Apr 11 '19 at 08:35

לבני מלכה

15,925
2
23
47

That should do the trick for me! Although, I should extend it to query for span as well right? – seokhoonlee Apr 11 '19 at 08:41
Also, I should mention that your unicode seems to include only hiragana. While there is katakana (U+30A0-30FF) and kanji (U+4E00-9FBF) – seokhoonlee Apr 11 '19 at 08:43
1

about type of japanses I dont understand it as well(sorry...) (but I know to speak korean :)) – לבני מלכה Apr 11 '19 at 08:45
1

Your nickname seems to be Japanese though haha – seokhoonlee Apr 11 '19 at 08:47

score 0 · Answer 2 · edited Apr 11 '19 at 11:23

0

There is a script property in Unicode regexes. You can write /^(\p{script=Han}|\p{script=Hiragana}|\p{script=Katakana})+$/ to match characters occuring in Japanese writing.

edited Apr 11 '19 at 11:23

daxim

39,270
4
65
132

answered Apr 11 '19 at 08:47

JGNI

3,933
11
21

HTML: Detect Unicode and Apply Class

2 Answers2