文字列の特定のキーワード以降を削除するにはどうしたら良いでしょうか？

文字列に特定のキーワードがある場合です。

該当するキーワードを含み、
それ以降の文字列を削除するにはどうしたら良いでしょうか？

＜元の文字列＞

<div class="item">商品名【商品ID】【りんご】【春夏秋冬】りんごのジュース 全3種</div>

※同じクラスのタグで複数あります。

▼▼▼ このような文字列にしたい ▼▼▼

＜特定のキーワード以降を削除＞（特定のキーワードが【りんご】の場合）

<div class="item">商品名【商品ID】</div>

特定のキーワドのみを置換することは出来たのですが
質問の件を満たす場合はどうしたら良いでしょうか？

window.onload = function(){

 $('.item').each(function(){
   var moji = $(this).html();
   $(this).html(
     moji.replace(/【りんご】/g,"")
   );
 });

}

ご教示の程どうぞ宜しくお願い致します。

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

回答4件

質問者さんの実現したいことを行うには、以下の5つの方法があります。
0. substringメソッドを利用する。
0. replaceメソッドを利用する。
0. splitメソッドを利用する。
0. sliceメソッドを利用する。
0. substrメソッドを利用する。

substringメソッドの場合

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box"></div>
15<script>
16    var str = "ごりららっぱりんごごりら";
17    var word = str.indexOf("りんご");
18    var result1 = (~word) ? str.substring(0, word) : "該当結果なし。";
19    document.getElementById("box").textContent = "結果1: " + result1;
20</script>
21</body>
22</html>

replaceメソッドの場合

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box"></div>
15<script>
16    var str = "ごりららっぱりんごごりら";
17    var word = /りんご.*/;
18    var result2 = (~str.search(word)) ? str.replace(word, "") : "該当結果なし。";
19    document.getElementById("box").textContent = "結果2: " + result2;
20</script>
21</body>
22</html>

splitメソッドの場合

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box"></div>
15<script>
16    var str = "ごりららっぱりんごごりら";
17    var result3 = (str.split("りんご").length !== 1) ? str.split("りんご")[0] : "該当結果なし。";
18    document.getElementById("box").textContent = "結果3: " + result3;
19</script>
20</body>
21</html>

sliceメソッドの場合

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box"></div>
15<script>
16    var str = "ごりららっぱりんごごりら";
17    var word = str.indexOf("りんご");
18    var result4 = (~word) ? str.slice(0, word) : "該当結果なし。";
19    document.getElementById("box").textContent = "結果4: " + result4;
20</script>
21</body>
22</html>

substrメソッドの場合

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box"></div>
15<script>
16    var str = "ごりららっぱりんごごりら";
17    var word = str.indexOf("りんご");
18    var result5 = (~word) ? str.substr(0, word) : "該当結果なし。";
19    document.getElementById("box").textContent = "結果5: " + result5;
20</script>
21</body>
22</html>

投稿2017/02/28 10:16

編集2017/03/02 08:54

s8_chu

総合スコア14731

think49

2017/02/28 10:23

innerText は非標準なので他人に勧めるなら textContent が好ましいかもしれません。 String.prototype.substring 系統でいうならば、slice や substr もあります(後者は ES5 まで非標準でしたが、ES6 で相互運用性の為に標準化されたようですね)。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substr

s8_chu

2017/02/28 10:44

think49さんの指摘された通りinnerTextプロパティは非標準でしたので、textContentプロパティに修正させていただきました。また、sliceメソッドとsubstrメソッドを利用した方法について追記させていただきました。教えていただきありがとうございました。

think49

2017/02/28 11:58

String.prototype.indexOf が -1 を返した場合の例外処理が足りないようです。とはいえ、私も後で気が付いて回答のコードを修正しました…。 console.log("ごりららっぱりんごごりら".slice(0, -1)); // "ごりららっぱりんごごり" console.log("ごりららっぱりんごごりら".substr(0, -1)); // "" console.log("ごりららっぱりんごごりら".substring(0, -1)); // ""

s8_chu

2017/03/02 09:02 編集

返信が遅れてしまい申し訳ありません。検索した文字列が現れなかった場合の考慮をしていませんでしたので、コードを修正させていただきました。お知らせいただきありがとうございました。

miconear

2017/03/03 05:37

ご回答有り難う御座います！様々なメソッドで同じ表現が可能であることに驚きました。未だJavaScriptの入門したてなのでソースをじっくり見ながらTry & Errorしたいと思います。大変勉強になります。有り難う御座います。

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

ベストアンサー

String.prototype.slice

jQuery.prototype.text を併用。

テキストノード値の検索ワード以降の文字列を削除する - JSFiddle

HTML
1<div class="item">商品名【商品ID】【りんご】【春夏秋冬】りんごのジュース 全3種</div>
2<div class="item">商品名【商品ID】【りんご】【春夏秋冬】りんごのジュース 全3種</div>
3<div class="item">商品名【商品ID】【バナナ】【春夏秋冬】バナナのジュース 全3種</div>
4<div class="item">商品名【商品ID】【オレンジ】【春夏秋冬】オレンジのジュース 全3種</div>
5
6<script>
7'use strict';
8jQuery('.item').text(function (i, string) {
9  var index = string.indexOf('【りんご】');
10  return index !== -1 ? string.slice(0, index) : string;
11});
12</script>

CharacterData.prototype.deleteData

CharacterData.prototype.deleteData は古くからある DOM API ですが、使っているコードはほとんど見かけませんね。
NodeList.prototype.forEach を併用。

JavaScript
1document.querySelectorAll('.item').forEach(function (element) {
2  var textNode = element.firstChild,
3      string = textNode.data,
4      index = string.indexOf('【りんご】');
5
6  if (index !== -1) {
7    textNode.deleteData(index, string.length);
8  }
9});

更新履歴

2017/02/28 19:37 CharacterData.prototype.deleteData のコードを追記
2017/02/28 20:51 jsfiddleのサンプル追加。CharacterData.prototype.deleteData のコードで検索語が見つからなかった場合に DOMException エラーが発生するバグ修正。
2017/02/28 21:02 String.prototype.slice のコードで検索語が見つからなかった場合にテキストノード値の末尾1文字を削ってしまうバグ修正。

Re: miconear さん

投稿2017/02/28 10:14

編集2017/02/28 12:02

think49

総合スコア18162

miconear

2017/03/03 05:29

ご回答有り難う御座います！ String.prototype.siliceで課題を解決し要件を満たす事ができました。 JSFiddleで実際に Try & Error を確認出来たので勉強になりました。ソースコード1行目の 'use strict'; が何の宣言(?)なのかが気になりました。まだ始めたばかりのJavascriptですが分かれば楽しさがありますね。仕事後の合間で習得できればと思いますが頑張りたいと思います。又何かありましたらご教示の程宜しくお願い致します。有難う御座います。

think49

2017/03/04 12:20

'use strict'; は Strict Mode を宣言する為の記述です。 Strict Mode にスイッチする事でいくつかの間違えやすいルーズな書き方を封印し、厳格なコードを強制できます。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

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

$(this).html($(this).html().replace(/【りんご】.*/,''));

投稿2017/02/28 10:02