• 125614

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

终于可以在html上自动显示汉字拼音了

服了这份高薪指南,涨多少你说了算>>

在上一篇讲在html显示拼音标签的文章里面,我最开始也误会了,只要加了<ruby>标签,就能自动显示汉字的拼音,但显然,这只是一个美好的想法,实际上拼音什么的还得靠自己手工来,但在程序员的世界,总还是有办法的,这篇就是讲怎么自动给汉字标拼音。

警告:这一篇后端的文章,毕竟我还是主要搞java编程的。

1、找开源

其实第一件事当然是找一个能够把汉字翻成拼音的开源软件咯,所以我就找到了(java就是这点好,要啥有啥),jpinyin,它在github上的链接我找不到了,有另外一个地址的jpinyin,但不知道是不是同一个。但它的确能够把汉字的拼音给拼出来,而且带声调。不过它本身的源码可以直接从maven上下载,所以还是可以放心使用。

2、用起来

我用的是spring boot,所以在pom.xml把jpinyin的jar引入进来。

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

然后使用jpinyin的汉字转换和我需要的html汉字拼音片段做出来

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把汉字转换成拼音,需要注意的是考虑到可能在输入的字符串不只是中文,可能是混杂内容,所以做了些处理,处理成中文有拼音标注,其他的字符串没有,大家看我上面的效果视频,里面演示的就是混杂字符串的情况。

然后,我们就搞个页面演示这个就行了:

<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片段,显示出来就行了,这个开源软件的拼音识别还是很不错的,不过多音字就没办法了,大家可以输入“降落伞兵投降了”试试。

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


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

1条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客