Finally, Chinese Pinyin can be displayed automatically on html

Keywords: Programming Ruby JQuery Java github

In the last article html articles showing phonetic labels In it, I was also mistaken at first. As long as the <ruby>tag is added, the spelling of Chinese characters can be displayed automatically. But obviously, this is only a good idea. In fact, what to spell depends on your own manual work, but in the programmer's world, there is always a way. This is how to automatically spell Chinese characters.

Warning: This backend article, after all, I'm mainly engaged in java programming.

1. Find Open Source

Actually, the first thing is to find an open source software that can turn Chinese characters into Pinyin, so I found it (java is that good, what to do). jpinyin I can't find its link on github. There's another jpinyin address, but I don't know if it's the same.But it does spell the phonetic characters with tones.However, its own source code can be downloaded directly from maven, so it is safe to use.

2. Use it

I'm using spring boot, so I introduced jpinyin's jar in pom.xml.

                <dependency>
			<groupId>com.github.stuxuhai</groupId>
			<artifactId>jpinyin</artifactId>
			<version>1.0</version>
		</dependency>

Then use jpinyin's Chinese character conversion and the html Chinese phonetic fragment I need to make it

private String pinyinHtml(String str) {
		String py = PinyinHelper.convertToPinyinString(str, "|", PinyinFormat.WITH_TONE_MARK);
		char[] charArray = str.toCharArray();
		String[] pyArray = py.split("\\|");
		String returnStr = "";
		int j = 0;
		for(int i=0;i<pyArray.length;i++) {
			if(ChineseHelper.isChinese(charArray[j])) {
				returnStr+="<ruby>"+charArray[j]+"<rt>"+pyArray[i]+"</rt></ruby>";
				j++;
			}else {
				for(int k=j;k<charArray.length;k++) {
					if(ChineseHelper.isChinese(charArray[j])){
						break;
					}
					returnStr +=charArray[k];
					j++;
				}
			}
		}
		return returnStr;
	}

This section mainly uses jpinyin to convert Chinese characters to Pinyin. It should be noted that considering the possible input string is not only Chinese, but also may be confusing content, we have done some processing to make the Chinese characters have Pinyin labels, other strings are not. Look at the effect video above, which demonstrates the situation of confusing strings.

Then we'll have a page demo of this:

<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pinyin</title>
<link href="https://cdn.bootcdn.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="form-group">
<textarea id="hanzi" rows="3" >
</textarea>
</div>
<div class="form-group">
<input id="magic" type="button" value="Miracle moment" />
</div>
<h3 id="miracle"></h3>
</div>
<script>
$(document).ready(function(){
	  $("#magic").click(function(){
	    $('#miracle').load('/pinyin/getPinyinHtml?str='+$('#hanzi').val());
	  })
	})
</script>
</body>
</html>

Read the html fragment through jquery's ajax, show it, this open source software phonetic recognition is still good, but the multi-syllable word is no longer possible, you can enter "parachute surrendered" to try.

This is complete Demo Code Welcome to Star

Posted by gotissues68 on Thu, 07 Nov 2019 06:47:01 -0800

Programmer Group

Finally, Chinese Pinyin can be displayed automatically on html

Hot Keywords