终于能够在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

这是完整的演示代码，欢迎加星