爲字母添加上點“`”,完成輕量級標記

  • 想對每個單詞都作出這樣的標記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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章