javascript 生成汉字和拼音对照

最新推荐文章于 2025-03-13 15:45:22 发布

mrtuzi

最新推荐文章于 2025-03-13 15:45:22 发布

阅读量763

点赞数 1

分类专栏： html css3 javascript 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/mrtuzi/article/details/126953707

版权

javascript 同时被 3 个专栏收录

7 篇文章

订阅专栏

html

6 篇文章

订阅专栏

css3

4 篇文章

订阅专栏

最近有个小需求，需要把文章的内容显示出来并生成拼音的对照，原计划用PHP实现，但想想，有js的话，直接前端实现更理想，但不管如何，肯定得大量堆div或span的，于是就有了以下的代码，显示效果如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery.js"></script>
<script src="py.js"></script>
<title>{$webtitle} - {$webname} </title>
<style>
.line{text-indent:2em;}
.word{text-align:center;display:inline-block;padding:0 5px;text-indent:0}
.word:before{content:attr(py);display:block;}
.cn{font-size:20px;text-indent:0}
.py{font-size:14px;text-indent:0;display:block;}
</style>
</head>

<body>
<div id='app'></div>
<script>
    var str='',lines='',words='',py='',i=0,j=0,html='';
    $.get('1.txt',function(body){
        str=body;
        lines=body.trim().split(/[\r\n]+/);
        for(i=0;i<lines.length;i++){
            if(lines[i].trim()=='')continue;
            words=lines[i].trim().split(''),linehtml='';
            if(!words)continue;
            for(j=0;j<words.length;j++){
                if(',！？，。…（），1234567890.'.indexOf(words[j])!=-1){
                    py=' ';
                }else{
                    py=pinyin(words[j]);
                }
                linehtml+="<span class='word' py='"+py+"'>"+words[j]+"</span>";
            }
            html+="<div class='line'>"+linehtml+"</div>";
        }
       $('#app').html(html);
       return;
       $('span').each(function(x,itm){
           var w=itm.innerText.trim();
           var py=pinyin($('#app').text());
           $('<div>'+py+'</div>').insertBefore(itm);
       });
    });
</script>

用了Bopomofo.js，在此特别感谢，有需要的朋友可去参观：