該顏色、數字數

static/css/main.css

@@ -186,6 +186,7 @@ li a {
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
@@ -202,6 +203,7 @@ li a {
     from {
         opacity: 1;
     }
+
     to {
         opacity: 0;
     }
@@ -260,7 +262,7 @@ li a {
 
 #vis {
     display: inline-block;
-    background-color: aliceblue;
+    background-color: transparent;
     position: relative;
     border-radius: 30px;
     resize: both;

static/js/generalText.js

@@ -15,7 +15,7 @@ function addStopWord() {
 
             } else {
                 stopwords.push(newsw)
-                $('#sweContainer').append($('<li>').attr('class', 'w3-display-container').append($('<span>').append(newsw)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function(e) {
+                $('#sweContainer').append($('<li>').attr('class', 'w3-display-container').append($('<span>').append(newsw)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function (e) {
                     var index = $(this).parent().index()
                     console.log(stopwords[index])
                     stopwords.splice(index, 1)
@@ -33,14 +33,14 @@ function addStopWord() {
 function showStopwordEditor() {
     console.log(stopwords)
     $(window).unbind('keydown')
-    $(window).keydown(function(event) {
+    $(window).keydown(function (event) {
         if (event.keyCode == 13) {
             addStopWord()
         }
     })
     $('#sweContainer').empty()
     for (word of stopwords) {
-        $('#sweContainer').append($('<li>').attr('class', 'w3-display-container').append($('<span>').append(word)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function(e) {
+        $('#sweContainer').append($('<li>').attr('class', 'w3-display-container').append($('<span>').append(word)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function (e) {
             var index = $(this).parent().index()
             console.log(stopwords[index])
             stopwords.splice(index, 1)
@@ -53,7 +53,7 @@ function showStopwordEditor() {
 
 function hideStopWordEditor() {
     $(window).unbind('keydown')
-    $(window).keydown(function(event) {
+    $(window).keydown(function (event) {
         if (event.keyCode == 13) {
             event.preventDefault()
             sendRequest()
@@ -74,7 +74,7 @@ function submit() {
             stopwords: stopwords
         }),
         contentType: 'application/json',
-        success: function(data) {
+        success: function (data) {
             tsvPath = data.Result.path
             destroyCurrentGraph()
             d3.select('#graph').append('div').attr('id', 'vis')
@@ -102,7 +102,7 @@ function buildSentetree() {
             gapBetweenGraph: 10
         });
         tree.data(model.getRenderedGraphs(2))
-        new ResizeSensor(jQuery('#d3kitRoot'), function() {
+        new ResizeSensor(jQuery('#d3kitRoot'), function () {
             var scale, origin;
             scale = Math.min(2, ($('#graph').outerWidth()) / ($('#d3kitRoot').outerWidth() + 60))
 
@@ -125,4 +125,11 @@ function switchMessageBox() {
     } else {
         $('#toggleTextBox').html('隱藏文字輸入區')
     }
+}
+
+function countWords() {
+    text = $("#rawTextBox").val()
+    let wordCount = text.split(new RegExp("[\u4e00-\u9fa5]")).length - 1
+    console.log(wordCount)
+    $("#wordcount").html('字數：' + wordCount)
 }

templates/generalTxt.html

@@ -48,8 +48,9 @@
             onclick="showStopwordEditor()">編輯停用詞</button>
     </div>
     <div id='rawText' class=''>
+        <div id="wordcount">字數：0</div>
         <textarea id='rawTextBox' rows=25 placeholder="輸入要視覺化的文字
-換行為斷句"></textarea>
+換行為斷句" onchange="countWords()"></textarea>
         <button class='general-button' style='margin: 10px 0px' onclick="submit()">提交</button>
     </div>
     <div>