終於能夠在html上自動顯示漢字拼音了

時間 2019-11-05

標籤終於能夠 html 自動顯示漢字拼音欄目 HTML 简体版

原文原文鏈接

在上一篇講在html顯示拼音標籤的文章裏面，我最開始也誤會了，只要加了<ruby>標籤，就能自動顯示漢字的拼音，但顯然，這只是一個美好的想法，實際上拼音什麼的還得靠本身手工來，但在程序員的世界，總仍是有辦法的，這篇就是講怎麼自動給漢字標拼音。css

警告：這一篇後端的文章，畢竟我仍是主要搞java編程的。html

一、找開源java

其實第一件事固然是找一個可以把漢字翻成拼音的開源軟件咯，因此我就找到了（java就是這點好，要啥有啥），jpinyin，它在github上的連接我找不到了，有另一個地址的jpinyin，但不知道是否是同一個。但它的確可以把漢字的拼音給拼出來，並且帶聲調。不過它自己的源碼能夠直接從maven上下載，因此仍是能夠放心使用。jquery

二、用起來git

我用的是spring boot，因此在pom.xml把jpinyin的jar引入進來。程序員

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

而後使用jpinyin的漢字轉換和我須要的html漢字拼音片斷作出來github

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;
	}

這段主要是使用jpinyin把漢字轉換成拼音，須要注意的是考慮到可能在輸入的字符串不僅是中文，多是混雜內容，因此作了些處理，處理成中文有拼音標註，其餘的字符串沒有，你們看我上面的效果視頻，裏面演示的就是混雜字符串的狀況。ajax

而後，咱們就搞個頁面演示這個就好了：spring

<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>拼音</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="奇蹟時刻" />
</div>
<h3 id="miracle"></h3>
</div>
<script>
$(document).ready(function(){
	  $("#magic").click(function(){
	    $('#miracle').load('/pinyin/getPinyinHtml?str='+$('#hanzi').val());
	  })
	})
</script>
</body>
</html>

經過jquery的ajax讀取html片斷，顯示出來就好了，這個開源軟件的拼音識別仍是很不錯的，不過多音字就沒辦法了，你們能夠輸入「降落傘兵投降了」試試。npm