質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2538閲覧

jQueryページ内リンク検索(インクリメンタルサーチ)を前方一致から部分一致に変えたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/07/04 12:02

前提・実現したいこと

ページ内リンク検索機能なのですが、文字列の前方一致となっています。
これを文字列の部分一致に変えたいです。
どのコードをどのように変えたらよろしいでしょうか?
以上、よろしくお願い致します。
(あるサイトのソースコードを参照しており多少改造させて頂きました。)

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="jquery.min.js"></script> 6 <script src="main.js"></script> 7 <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> --> 8 <link rel="stylesheet" type="text/css" href="style.css"> 9 </head> 10 <body> 11 <div class="form-group"> 12 <input type='text' id="keyword" class="form-control" placeholder="好きなフルーツを入力してください"> 13 <button type="button" id="submit" class="btn">検索</button> 14 </div> 15 <ul id = "list" ></ul> 16 </body>

該当のソースコード

main.js

1var fruits = [ {href:"#", text:"apple"}, {href:"#", text:"bin"} ] 2 3$(function() { 4 var list = $("#list"); 5 // id="list"を持つ変数を定義 6 var preWord; 7 // 入力結果と比較するための変数preWordを設定 8 9 function appendList(word) { 10 var item = $('<li class="list">').append($('<a>').prop('href', word.href).text(word.text)); 11 // class="list"で削除という命令のため、全てのアイテムにclass="list"を追加 12 list.append(item); 13 // var list = $("#list")のlistの中に、class="list"を持ったitemを追加 14 } 15 16 function editElement(element) { 17 var result = "^" + element; 18 // mapで回ってきた配列の各要素の前に^を付け加える 19 return result; 20 } 21 22 $("#keyword").on("keyup", function() { 23 // id="keyword"のキーが押されて上がった時に発火する。 24 var input = $("#keyword").val(); 25 // 変数inputを設定し、id="keyword"のバリューを中に入れる 26 var inputs = input.split(" ").filter(function(e) { return e; }); 27 // splitを使い空白で切り新しい配列を形成。aスペース3つbの場合、["a", "", "", "b"]となる。 ※ 1 分け方の解説 28 // filterでfunction(e)のeに配列がそれぞれ入り、true or falseでtrueのもののみ返す。""はfalseになるため消える。 ※ 2 filterについての解説 29 var newInputs = inputs.map(editElement); 30 // 後の正規化表現のために、配列の各要素に^を付け加える。(ex)^ap 文字の先頭がapのときマッチ 31 var word = newInputs.join("|"); 32 // 後の正規化表現のために、配列の各要素を|を使って連結。(ex) a|b aまたはbにマッチ 33 // この時点で、最初の入力が a b なら、^a|^b のように加工されており、先頭aもしくは先頭bにマッチ、となる。 34 var reg = RegExp(word); 35 // 加工されたwordからパターンマッチの正規化オブジェクトを生成して変数regに入れる。 36 37 if (input.length === 0) { 38 $(".list").remove(); 39 // フォームに値がないときに、listを全て削除する。 40 } 41 42 if (word != preWord && input.length !== 0) { 43 // word != preWordで値が変わっていることを確認(shiftとか押された時対策) 44 // input.length !== 0で何か値が入っていることを確認 45 $(".list").remove(); 46 // class = "list"を全て削除し、リストを空にする 47 $.each(fruits, function(i, fruit) { 48 if (fruit.text.match(reg)) { 49 // 配列fruitsがreg(正規化オブジェクト)とマッチしていたらappendListする 50 appendList(fruit); 51 } 52 }); 53 54 if ($(".list").length === 0) { 55 // $(".list").length === 0は当てはまるものがないということなので、その処理。 56 appendList("一致する果物はありませんでした"); 57 } 58 } 59 preWord = word; 60 // preWordにwordを入れてpreWordを更新する 61 }); 62});

試したこと

すいませんJSあまり書けないもので、
単純にレシピサイトにある部分一致コードと入れ替えたりしたり等のことしかしてません。

補足情報(FW/ツールのバージョンなど)

本番環境がIEです。(一応...)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

改変内容としてはJavaScriptというより正規表現だと思いますので、一度正規表現について調べてみてはいかがでしょうか。正規表現の前方一致がどういうものかが分かれば、あっさり解決するかもしれません。

投稿2020/07/12 08:54

PgMidori

総合スコア184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/07/12 10:08

おっしゃる通り正規表現でした。 "^"を消したら部分一致になりました。 もっと勉強します。 この度はありがとうございます。
guest

0

"^"を消したら部分一致になりました。
^の位置で一致方式が決まるのですね。
この度は考えてくださった皆さんありがとうございます。

投稿2020/07/12 10:09

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問