Skip to content

Commit a0609e6

Browse files
kevb34nskevb34ns
committed
finished the function, updated the test page and README
1 parent 0bf8045 commit a0609e6

File tree

5 files changed

+125
-31
lines changed

5 files changed

+125
-31
lines changed

‎README.md‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
# pinyinify
2-
A simple JavaScript function for converting pinyin containing tone numbers (`pin4yin1`) to pinyin using standard Unicode tone marks (<code>pi&#768;nyi&#772;n</code>).
2+
A simple JavaScript function for converting pinyin containing tone numbers (`pin4yin1`) to pinyin using standard Unicode tone marks (<code>pi&#768;nyi&#772;n</code>). A list of Unicode tone marks for HTML can be found [here](http://pinyin.info/unicode/unicode_test.html).
33

44
## Usage
55
The function `pinyinify()` takes a string parameter, which can be one of the following:
66

77
+ A single character, which must be one of: `a`, `e`, `i`, `o`, `u`, or <code>&#252;</code>, followed by a tone mark. `v` is an acceptable substitute for <code>&#252;</code>.
88
+ A pinyin word or phrase using tone numbers. Examples: `mao1`, `chi1fan4`, `wo3 men5`. For simplicity's sake, the function will process most words with tone numbers, including ones that may not be valid pinyin.
9-
+ A string containing both pinyin words and non-pinyin words, characters, or symbols. Example: `My Chinese name is yang2kai3wen2.` **Be careful:** any word that resembles the structure of pinyin (has a number at the end of it, for example) may be given tone marks. Therefore, it is recommended that you avoid this option if possible.
9+
+ A string containing both pinyin words and non-pinyin words, characters, or symbols. Pinyin must be separated from non-pinyin words by whitespace, but pinyin can have symbols/punctuation adjacent to it. Example: `My Chinese name is yang2kai3wen2.` **Be careful:** any word that resembles the structure of pinyin (has a number at the end of it, for example) may be given tone marks. Therefore, it is recommended that you avoid this option if possible.
1010

1111
If you pass a string that meets one of the requirements above, the function will return a string with the tone numbers converted to tone marks. Otherwise, it will return an unchanged string.
1212

1313
## Limitations
14-
<!-- TODO lowercase only, incomplete validation, etc.-->
14+
These are some current limitations, which may be addressed in the future should the need arise.
15+
16+
+ **Lowercase Pinyin Only:** since some typefaces have trouble displaying uppercase pinyin symbols, any pinyin words will be converted to lowercase. Non-pinyin words are not affected.
17+
+ **Incomplete Validation:** Right now, `pinyinify()` does not ensure that words are valid pinyin words before conversion. It performs several checks to eliminate obviously incorrect cases:
18+
- Words that are longer than 6 characters (without the tone number) are ignored, since no pinyin words are longer than that.
19+
- There must be a tone number from 1-5 at the end.
20+
- There must be at least one pinyin vowel in the word. The placement of tone marks is correct for any valid pinyin word.
21+
22+
## Test Page
23+
An HTML test page allows you to test the function without writing any of your code. Simply open `test.html`, located in the `test/` directory, in your browser, and type some text into the text box to see the result.
24+
25+
## Bugs
26+
Feel free to report bugs on the issue tracker. I will do my best to get around to them in a timely manner. If you want to contribute improvements to the code, let me know by [sending me an email](mailto:[email protected]) or opening an issue.

‎pinyinify.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -106,25 +106,27 @@ var pinyinify = function(str) {
106106
i = 0;
107107
}
108108
var toneNumIndex = str.search(/[1-5]/);
109-
if (toneNumIndex > 0 && toneNumIndex < 7) {
109+
var whitespaceIndex = str.search(/\s/);
110+
if (toneNumIndex > 0 && toneNumIndex < 7 &&
111+
(whitespaceIndex < 0 || whitespaceIndex > toneNumIndex)) {
110112

111113
res += str.substring(0, toneNumIndex + 1).convertPinyin();
112114
str = str.substring(toneNumIndex + 1);
113-
} else {
114-
115-
var whitespaceIndex = str.search(/\s/);
116-
if (whitespaceIndex < 0) {
115+
} else if (whitespaceIndex < 0) {
117116

118-
res += str.substring(0);
119-
str = "";
120-
} else {
117+
res += str.substring(0);
118+
str = "";
119+
} else {
121120

122-
res += str.substring(0, whitespaceIndex + 1);
123-
str = str.substring(whitespaceIndex + 1);
124-
}
121+
res += str.substring(0, whitespaceIndex + 1);
122+
str = str.substring(whitespaceIndex + 1);
125123
}
124+
} else if (i >= str.length) {
126125

127-
} else {
126+
res += str.substring(0);
127+
str = "";
128+
}
129+
else {
128130

129131
i++;
130132
}

‎test.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎test/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
body {
2+
padding: 50px;
3+
background:#333;
4+
color: #fff;
5+
font: 14px "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", "微软雅黑体", "STXKaiti", "华文楷体", sans-serif;
6+
}
7+
8+
a {
9+
color: #fff;
10+
}
11+
12+
a:hover {
13+
color: #fff;
14+
}
15+
16+
textarea {
17+
resize: vertical;
18+
margin-bottom: 5px;
19+
}
20+
21+
#result-container {
22+
margin-top: 40px;
23+
visibility: hidden;
24+
}
25+
26+
#result {
27+
border-radius: 2px;
28+
padding: 5px;
29+
background: #000;
30+
}
31+
32+
#submit-btn {
33+
width: 100%;
34+
}

‎test/test.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<!-- Bootstrap -->
9+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
10+
11+
<link href="style.css" type="text/css" rel="stylesheet">
12+
</head>
13+
<body>
14+
<div id="outer-container" class="col-md-6 col-md-offset-3">
15+
<div class="page-header">
16+
<h1>pinyinifyJS Test Page <small><span class="label label-primary"><a href="https://github.com/kevinkyang/pinyinify/blob/master/README.md" target="blank">Help</a></span></small></h1>
17+
18+
</div>
19+
<div class="form-group">
20+
<label for="textfield">Text to Convert:</label>
21+
<textarea rows="5" id="textfield" name="textfield" class="form-control"></textarea>
22+
<!-- <input type="text" id="textfield" name="textfield" class="form-control"> -->
23+
<button type="submit" id="submit-btn" class="btn btn-primary" name="Submit">Convert Pinyin</button>
24+
</div>
25+
<div id="result-container">
26+
<label for="result">Result:</label>
27+
<div id="result"></div>
28+
</div>
29+
</div>
30+
31+
<!-- Load Scripts -->
32+
<!-- jQuery -->
33+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
34+
<script>
35+
$(document).ready(function() {
36+
37+
var submit = function(str) {
38+
39+
$("#result").text(pinyinify(str));
40+
$("#result-container").css("visibility", "visible");
41+
}
42+
43+
$(".form-control").focus();
44+
$(".form-control").keyup(function(event) {
45+
46+
if (event.which === 13) {
47+
48+
submit($("#textfield").val());
49+
$(".form-control").blur();
50+
}
51+
});
52+
53+
$("#submit-btn").click(function() {
54+
55+
submit($("#textfield").val());
56+
$("#submit-btn").blur();
57+
});
58+
})
59+
</script>
60+
<script src="../pinyinify.js"></script>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)