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

最新推荐文章于 2022-06-02 21:17:15 发布

wphmoon123

最新推荐文章于 2022-06-02 21:17:15 发布

阅读量2k

点赞数 1

分类专栏： java 文章标签： java 拼音 spring boot html

本文链接：https://blog.csdn.net/firebat/article/details/90406418

版权

java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

wphmoon123

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
终于可以在html上自动显示汉字拼音了

在上一篇讲在html显示拼音标签的文章里面，我最开始也误会了，只要加了<ruby>标签，就能自动显示汉字的拼音，但显然，这只是一个美好的想法，实际上拼音什么的还得靠自己手工来，但在程序员的世界，总还是有办法的，这篇就是讲怎么自动给汉字标拼音。警告：这一篇后端的文章，毕竟我还是主要搞java编程的。1、找开源其实第一件事当然是找一个能够把汉字翻成拼音的开源软件咯，所以我就找到...
复制链接

扫一扫

专栏目录