teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問文字列の特定のキーワード以降を削除するにはどうしたら良いでしょうか？

編集履歴

回答編集履歴

3

String\.prototype\.slice のコードで検索語が見つからなかった場合にテキストノード値の末尾1文字を削ってしまうバグ修正。

2017/02/28 12:02

投稿

think49
think49

スコア18162

test CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
  <div class="item">商品名【商品ID】【りんご】【春夏秋冬】りんごのジュース 全3種</div>
18
18
 
19
- <div class="item">商品名【商品ID】【りんご】【春夏秋冬】りんごのジュース 全3種</div>
19
+ <div class="item">商品名【商品ID】【バナナ】【春夏秋冬】バナナのジュース 全3種</div>
20
+
21
+ <div class="item">商品名【商品ID】【オレンジ】【春夏秋冬】オレンジのジュース 全3種</div>
20
22
 
21
23
 
22
24
 
@@ -26,7 +28,9 @@
26
28
 
27
29
  jQuery('.item').text(function (i, string) {
28
30
 
29
- return string.slice(0, string.indexOf('【りんご】'));
31
+ var index = string.indexOf('【りんご】');
32
+
33
+ return index !== -1 ? string.slice(0, index) : string;
30
34
 
31
35
  });
32
36
 
@@ -80,11 +84,9 @@
80
84
 
81
85
  - 2017/02/28 19:37 CharacterData.prototype.deleteData のコードを追記
82
86
 
83
- - 2017/02/28 20:51jsfiddleのサンプル追加。
87
+ - 2017/02/28 20:51 jsfiddleのサンプル追加。CharacterData.prototype.deleteData のコードで検索語が見つからなかった場合に DOMException エラーが発生するバグ修正。
84
88
 
85
- String.prototype.slice のコードで検索語が見つからなかった場合にテキストノード値の末尾1文字を削ってしまうバグ修正。
89
+ - 2017/02/28 21:02 String.prototype.slice のコードで検索語が見つからなかった場合にテキストノード値の末尾1文字を削ってしまうバグ修正。
86
-
87
- CharacterData.prototype.deleteData のコードで検索語が見つからなかった場合に DOMException エラーが発生するバグ修正。
88
90
 
89
91
 
90
92
 

2

jsfiddleのサンプル追加。String\.prototype\.slice のコードで検索語が見つからなかった場合にテキストノード値の末尾1文字を削ってしまうバグ修正。CharacterData\.p

2017/02/28 12:02

投稿

think49
think49

スコア18162

test CHANGED
@@ -3,6 +3,10 @@
3
3
 
4
4
 
5
5
  `jQuery.prototype.text` を併用。
6
+
7
+
8
+
9
+ - [テキストノード値の検索ワード以降の文字列を削除する - JSFiddle](https://jsfiddle.net/7z29dc9g/1/)
6
10
 
7
11
 
8
12
 
@@ -36,11 +40,13 @@
36
40
 
37
41
 
38
42
 
39
- `CharacterData.prototype.deleteData` は古くからある DOM API ですが、使用しているコードは見たことがありません…。
43
+ `CharacterData.prototype.deleteData` は古くからある DOM API ですが、使っているコードはほとんど見かけませんね。
40
44
 
41
45
  `NodeList.prototype.forEach` を併用。
42
46
 
43
47
 
48
+
49
+ - [テキストノード値の検索ワード以降の文字列を削除する - JSFiddle](https://jsfiddle.net/7z29dc9g/2/)
44
50
 
45
51
  - [インタフェース CharacterData - Document Object Model Core Level 2](http://www.y-adagio.com/public/standards/tr_dom2_core/core.html#ID-FF21A306)
46
52
 
@@ -52,11 +58,17 @@
52
58
 
53
59
  var textNode = element.firstChild,
54
60
 
55
- string = textNode.data;
61
+ string = textNode.data,
62
+
63
+ index = string.indexOf('【りんご】');
56
64
 
57
65
 
58
66
 
67
+ if (index !== -1) {
68
+
59
- textNode.deleteData(string.indexOf('【りんご】'), string.length);
69
+ textNode.deleteData(index, string.length);
70
+
71
+ }
60
72
 
61
73
  });
62
74
 
@@ -64,4 +76,16 @@
64
76
 
65
77
 
66
78
 
79
+ ### 更新履歴
80
+
81
+ - 2017/02/28 19:37 CharacterData.prototype.deleteData のコードを追記
82
+
83
+ - 2017/02/28 20:51jsfiddleのサンプル追加。
84
+
85
+ String.prototype.slice のコードで検索語が見つからなかった場合にテキストノード値の末尾1文字を削ってしまうバグ修正。
86
+
87
+ CharacterData.prototype.deleteData のコードで検索語が見つからなかった場合に DOMException エラーが発生するバグ修正。
88
+
89
+
90
+
67
91
  Re: miconear さん

1

CharacterData\.prototype\.deleteData

2017/02/28 11:51

投稿

think49
think49

スコア18162

test CHANGED
@@ -1,3 +1,11 @@
1
+ ### String.prototype.slice
2
+
3
+
4
+
5
+ `jQuery.prototype.text` を併用。
6
+
7
+
8
+
1
9
  ```HTML
2
10
 
3
11
  <div class="item">商品名【商品ID】【りんご】【春夏秋冬】りんごのジュース 全3種</div>
@@ -24,4 +32,36 @@
24
32
 
25
33
 
26
34
 
35
+ ### CharacterData.prototype.deleteData
36
+
37
+
38
+
39
+ `CharacterData.prototype.deleteData` は古くからある DOM API ですが、使用しているコードは見たことがありません…。
40
+
41
+ `NodeList.prototype.forEach` を併用。
42
+
43
+
44
+
45
+ - [インタフェース CharacterData - Document Object Model Core Level 2](http://www.y-adagio.com/public/standards/tr_dom2_core/core.html#ID-FF21A306)
46
+
47
+
48
+
49
+ ```JavaScript
50
+
51
+ document.querySelectorAll('.item').forEach(function (element) {
52
+
53
+ var textNode = element.firstChild,
54
+
55
+ string = textNode.data;
56
+
57
+
58
+
59
+ textNode.deleteData(string.indexOf('【りんご】'), string.length);
60
+
61
+ });
62
+
63
+ ```
64
+
65
+
66
+
27
67
  Re: miconear さん