- 想對每個單詞都作出這樣的標記
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>