【Javascript】append(" ")で追加した空白を消す方法

実現したいこと

あるdiv要素の中にspan要素とappend(" ")で追加された空白が混在していた場合、空白を消す方法はあるのでしょうか。removeを使ってもできないですし、そもそもデベロッパーツールで挿入されている部分を見ても空白があるのかどうなのか判別できません。progateのエディタでは実際にこうしているかは分かりませんが、デベロッパーツールで見た限りではこれを実現しているように見えます。詳しい方がいらっしゃいましたらご教授の程宜しくお願いします。

追記

ご指摘を受けてコードの一部を記載いたしました。contenteditable属性のついたdiv部分をクリックしていただいて文字を入力すると、空白を入力したときを除いて文字がspanで囲まれるようになっております。私の至らぬ点大変ご迷惑をおかけしました。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
6  crossorigin="anonymous"></script>
7  <script src = "main.js"></script>
8</head>
9<body>
10        <div class = "pre-editor2" id = "pre-editor2" contenteditable = "true" style = "z-index: 100;"></div>
11              <div class = "layer text-layer"><div class = "line"></div></div>
12</body>
13</html>

css
1* {
2  font-size: 12px;
3  line-height: 20px;
4  font-family: "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
5}
6
7.text-input {
8  position: absolute;
9  color: white;
10  font-size: 1px;
11  font-size: 1px;
12  height: 1px;
13  width: 1px;
14  padding: 0 1px;
15  margin: 0 -1px;
16  border: none;
17  opacity: 0;
18  resize: none;
19  white-space: pre;
20  user-select: text;
21  contain: strict;
22  outline: none;
23  caret-color: transparent;
24}
25.text-input-active {
26  z-index: 1000;
27  color: #000;
28  width: auto;
29  height: 20px;
30  opacity: 1;
31  font-size: 12px;
32  background-color: transparent;
33  font-size: 12px;
34}
35
36.content {
37  position: absolute;
38  height: 100%;
39  width: 600px;
40  background-color: #ddd;
41  cursor: text;
42  top: 0;
43}
44
45.layer {
46  z-index: 1;
47  position: absolute;
48  overflow: hidden;
49  word-wrap: normal;
50  white-space: pre;
51  height: 100%;
52  width: 100%;
53  box-sizing: border-box;
54  pointer-events: none;
55}
56
57.scroller {
58  position: absolute;
59  overflow: hidden;
60  user-select: none;
61  cursor: text;
62  height: 800px;
63  width: 500px;
64  top: 0;
65}
66
67.editor {
68  height: 800px;
69  width: 500px;
70  position: absolute;
71}
72
73.pre-editor {
74  height: 800px;
75  width: 500px;
76  position: absolute;
77  top: 0;
78  margin: 0;
79}
80
81.pre-editor2 {
82  height: 800px;
83  width: 500px;
84  position: absolute;
85  top: 0;
86  margin: 0;
87  z-index: 100;
88  opacity: 0;
89}
90
91.gutter {
92
93}
94
95.text-layer {
96  height: 1e+06px;
97  top: 0;
98}
99
100.cursor-layer {
101  z-index: 4;
102  top: 0;
103}
104
105.cursor {
106  display: block;
107  width: 7px;
108  height: 20px;
109  animation: flash 0.8s infinite;
110  position: absolute;
111  box-sizing: border-box;
112  border-left: 2px solid;
113  color: #444;
114}
115
116@keyframes flash {
117  0% {
118    opacity: 1;
119  }
120  50% {
121    opacity: 1;
122  }
123  51%{
124    opacity: 0;
125  }
126  100% {
127    opacity: 0;
128  }
129}
130
131.generated-span {
132  position: absolute;
133  top: -1000px;
134  left: -1000px;
135  white-space: nowrap;
136  font-size: 12px;
137}
138
139.line {
140  height: 20px;
141  width: 1e+06px;
142  line-height: 20px;
143  position: absolute;
144  top: 0;
145  left: 0;
146}
147
148.cjk {
149  height: 20px;
150  line-height: 20px;
151  vertical-align: middle;
152  display: inline-block;
153}
154
155.indentifier {
156  height: 20px;
157  line-height: 20px;
158  vertical-align: middle;
159  display: inline-block;
160}
161

javascript
1  let target = document.querySelector('.pre-editor2');
2  let $target = $(target);  
3let textlayer = document.querySelector('.text-layer');
4  let $textlayer = $(textlayer);
5
6  target.addEventListener("input",function(){
7    if(target.innerHTML.lastIndexOf("&nbsp;") == "-1"){
8      if(target.innerHTML.length > 1) {
9        $('.line').children().last().remove();
10      }
11      $('.line').append(`<span class = "identifier">${target.innerHTML}</span>`);
12    } else {
13      target.innerHTML = "";
14      $('.line').append(" ");
15    }
16  });

codepen

m.ts10806

2020/03/20 02:49

全体の状況によります。 HTML含めて状況を確認できるコードをすべてご提示ください。でないと、「回答者の勝手な解釈に基づいた雑なアドバイス」にしかならず、お互い時間の無駄になります。

loup

2020/03/20 03:17

ご指摘を受けてコードを記載しました。私の考えの至らぬ点、大変申し訳ございませんでした。

AkitoshiManabe

2020/03/20 10:03

progate という語がありますが、初学であれば初心者マークを付けるべきです。編集可能領域（div#pre-editor2）に対するイベントリスナの「実装要件」が不明なので、空白混在がNGとなる理由もわかりません。また、「div#pre-editor2に入力されたらdiv.lineに出力する」という解釈で良いのか、この場合、入力に対し出力はどのようにしたいのか。今一度、実現したいことを整理されたほうが良いと思います。

loup

2020/03/20 10:37

あくまでもprogateに実装されているエディタが、このような挙動を行っているように見えるということで引き合いに出しただけで特に関係はありません。また、特に実装要件などは関係なく、消すことができるのかどうかを質問させていただいています。そのような細かい実装部分が本題ではないので、可能かどうかを聞くつもりで当初はコードを提示しておりませんでした。しいて言えば「backspaceで消す」というのがお答えですが、ここまでを求めるつもりはないのでこのような形になってしまいました。分かりづらくて大変申し訳ありません。

行動規範の内容に同意します

回答1件

ベストアンサー

あるdiv要素の中にspan要素とappend(" ")で追加された空白が混在していた場合、空白を消す方法はあるのでしょうか

ご質問のコードでは jQuery / VanillaJSを混在されているので

jQuery ではappend() L306 に示されるように、TextNode は弾かれていますので空白除去の心配は不要です（text() や html() を使えば、TextNodeも追加できる）。
VanillaJS の場合、子Nodeへの追加は appendChild() で行い、要素または テキストノード を追加するので、空白を消す方法としては該当するTextNodeを removeChild() することになります。

デベロッパーツールで挿入されている部分を見ても空白があるのかどうなのか判別できません

デベロッパーツールの「Elements タブ」では半角スペースの TextNode を目視で確認できないかもしれません。
ですので、「Console タブ」を使い、イベントリスナ内に console.log() などを挿し込んで、動的に変化したマークアップ構造を確認する手法を使うのが良いと思います。

jQuery / VanillaJS の混在について

jQuery を使う場合、Data API が確保するキャッシュ（メモリ領域）を考慮しなければなりませんので、混在させたる場合は $() の引数に渡すなどの jQuery オブジェクト生成時に特化し、DOM 操作は jQuery のAPIを使ったほうが安全です。

特に、jQueryプラグインを併用時は、DataAPIを利用されていることが多いので、メモリリークを避けるためにも、DOM操作は jQuery APIを利用してクリーンナップを自動化するべきです。

投稿2020/03/20 13:32

AkitoshiManabe

総合スコア5434