diff --git a/app/server/static/js/sequence_labeling.js b/app/server/static/js/sequence_labeling.js
index 055fe924..3f528b44 100644
--- a/app/server/static/js/sequence_labeling.js
+++ b/app/server/static/js/sequence_labeling.js
@@ -16,7 +16,7 @@ Vue.component('annotator', {
                          v-if="id2label[r.label]"\
                          v-bind:class="{tag: id2label[r.label].text_color}"\
                          v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"\
-                    >{{ text.slice(r.start_offset, r.end_offset) }}<button class="delete is-small"\
+                    >{{ [...text].slice(r.start_offset, r.end_offset).join(\'\') }}<button class="delete is-small"\
                                          v-if="id2label[r.label].text_color"\
                                          @click="removeLabel(r)"></button></span>\
                </div>',
@@ -41,15 +41,15 @@ Vue.component('annotator', {
         const preSelectionRange = range.cloneRange();
         preSelectionRange.selectNodeContents(this.$el);
         preSelectionRange.setEnd(range.startContainer, range.startOffset);
-        start = preSelectionRange.toString().length;
-        end = start + range.toString().length;
+        start = [...preSelectionRange.toString()].length;
+        end = start + [...range.toString()].length;
       } else if (document.selection && document.selection.type !== 'Control') {
         const selectedTextRange = document.selection.createRange();
         const preSelectionTextRange = document.body.createTextRange();
         preSelectionTextRange.moveToElementText(this.$el);
         preSelectionTextRange.setEndPoint('EndToStart', selectedTextRange);
-        start = preSelectionTextRange.text.length;
-        end = start + selectedTextRange.text.length;
+        start = [...preSelectionTextRange.text].length;
+        end = start + [...selectedTextRange.text].length;
       }
       this.startOffset = start;
       this.endOffset = end;