- 想对每个单词都作出这样的标记
helllo
,一个个标注又太麻烦,就写了一个前端页面用来为每个单词都添加上点。
直接粘贴到一个html里打开就能使用了。没有添加上点检测,所以文本中不要有上点。页面做的不好看,凑活着用吧。
效果展示
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>为每个单词轻量级标记</title>
<!--vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.common.dev.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="test">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h3>输入文本内容:</h3><br>
<textarea style="height: 200px;width: 500px;" v-model="msg" ></textarea><br>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h3>转换后的文本:</h3><br>
{{newMsg}}
</div>
<div class="col-sm-1"></div>
</div>
<br>
<button type="button" class="btn btn-lg"v-on:click="changeClick" style="display:block;margin:0 auto">转换</button>
</div>
<script>
new Vue({//Vue 实例
el: "#test",//绑定元素所对应的标签称为挂载点
data: {//Vue实例 中的数据
msg: "",
char:"`",
newMsg:""
},
methods: {
changeClick:function () {
var array = [];
for(var i=0;i<this.msg.length;i++){
if(this.msg.charCodeAt(i)>=0&&this.msg.charCodeAt(i)<128){//检测字符是否为字母
if(i===0){
array.push(this.char);
array.push(this.msg.charAt(i));
continue;
}
if(!(this.msg.charCodeAt(i-1)>=0&&this.msg.charCodeAt(i-1)<128)){
//检测字母前一个字符是否是字母,如果不是,添加字符,再添加字母
array.push(this.char);
array.push(this.msg.charAt(i));
}else if (!(this.msg.charCodeAt(i+1)>=0&&this.msg.charCodeAt(i+1)<128)) {
//检测字母后一个字符是否是汉字,如果是,添加字母,再添加字符
array.push(this.msg.charAt(i));
array.push(this.char);
}else{//如果字母两边的字符都是字母,就添加字母
array.push(this.msg.charAt(i));
}
}else {//如果不是,将字符添加到changeMsg中
array.push(this.msg.charAt(i));
}
}
this.newMsg = array.join("");
}
}
})
</script>
</body>
</html>