キーワードハイライトをちょっと加工して「次へ」、「前へ」ボタンをつける
スポンサーリンク
Webサイト内の検索結果でのキーワードハイライトなどに使える、このライブラリ。
https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
以下の記事内に書いた調査の中で、PDFをHTML化する方法など記載しました。その際に、使い勝手を良くするためにページ内検索、次へ、前へボタンを設けて操作性を上げたくてちょっとコーディングしてみました。
azwoo.hatenablog.com
実際は案件ではつかわなかったので備忘として記載します。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://johannburkard.de/resources/Johann/jquery.highlight-5.js"></script>
</head>
<body>
<p>
親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰こしを抜ぬかした事がある。なぜそんな無闇むやみをしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談じょうだんに、いくら威張いばっても、そこから飛び降りる事は出来まい。弱虫やーい。と囃はやしたからである。小使こづかいに負ぶさって帰って来た時、おやじが大きな眼めをして二階ぐらいから飛び降りて腰を抜かす奴やつがあるかと云いったから、この次は抜かさずに飛んで見せますと答えた。
親類のものから西洋製のナイフを貰もらって奇麗きれいな刃はを日に翳かざして、友達ともだちに見せていたら、一人が光る事は光るが切れそうもないと云った。切れぬ事があるか、何でも切ってみせると受け合った。そんなら君の指を切ってみろと注文したから、何だ指ぐらいこの通りだと右の手の親指の甲こうをはすに切り込こんだ。幸さいわいナイフが小さいのと、親指の骨が堅かたかったので、今だに親指は手に付いている。しかし創痕きずあとは死ぬまで消えぬ。
庭を東へ二十歩に行き尽つくすと、南上がりにいささかばかりの菜園があって、真中まんなかに栗くりの木が一本立っている。これは命より大事な栗だ。実の熟する時分は起き抜けに背戸せどを出て落ちた奴を拾ってきて、学校で食う。菜園の西側が山城屋やましろやという質屋の庭続きで、この質屋に勘太郎かんたろうという十三四の倅せがれが居た。勘太郎は無論弱虫である。弱虫の癖くせに四つ目垣を乗りこえて、栗を盗ぬすみにくる。ある日の夕方折戸おりどの蔭かげに隠かくれて、とうとう勘太郎を捕つらまえてやった。その時勘太郎は逃にげ路みちを失って、一生懸命いっしょうけんめいに飛びかかってきた。向むこうは二つばかり年上である。弱虫だが力は強い。鉢はちの開いた頭を、こっちの胸へ宛あててぐいぐい押おした拍子ひょうしに、勘太郎の頭がすべって、おれの袷あわせの袖そでの中にはいった。邪魔じゃまになって手が使えぬから、無暗に手を振ふったら、袖の中にある勘太郎の頭が、右左へぐらぐら靡なびいた。しまいに苦しがって袖の中から、おれの二の腕うでへ食い付いた。痛かったから勘太郎を垣根へ押しつけておいて、足搦あしがらをかけて向うへ倒たおしてやった。山城屋の地面は菜園より六尺がた低い。勘太郎は四つ目垣を半分崩くずして、自分の領分へ真逆様まっさかさまに落ちて、ぐうと云った。勘太郎が落ちるときに、おれの袷の片袖がもげて、急に手が自由になった。その晩母が山城屋に詫わびに行ったついでに袷の片袖も取り返して来た。
この外いたずらは大分やった。大工の兼公かねこうと肴屋さかなやの角かくをつれて、茂作もさくの人参畠にんじんばたけをあらした事がある。人参の芽が出揃でそろわぬ処ところへ藁わらが一面に敷しいてあったから、その上で三人が半日相撲すもうをとりつづけに取ったら、人参がみんな踏ふみつぶされてしまった。古川ふるかわの持っている田圃たんぼの井戸いどを埋うめて尻しりを持ち込まれた事もある。太い孟宗もうそうの節を抜いて、深く埋めた中から水が湧わき出て、そこいらの稲いねにみずがかかる仕掛しかけであった。その時分はどんな仕掛か知らぬから、石や棒ぼうちぎれをぎゅうぎゅう井戸の中へ挿さし込んで、水が出なくなったのを見届けて、うちへ帰って飯を食っていたら、古川が真赤まっかになって怒鳴どなり込んで来た。たしか罰金ばっきんを出して済んだようである。
おやじはちっともおれを可愛かわいがってくれなかった。母は兄ばかり贔屓ひいきにしていた。この兄はやに色が白くって、芝居しばいの真似まねをして女形おんながたになるのが好きだった。おれを見る度にこいつはどうせ碌ろくなものにはならないと、おやじが云った。乱暴で乱暴で行く先が案じられると母が云った。なるほど碌なものにはならない。ご覧の通りの始末である。行く先が案じられたのも無理はない。ただ懲役ちょうえきに行かないで生きているばかりである。
母が病気で死ぬ二三日にさんち前台所で宙返りをしてへっついの角で肋骨あばらぼねを撲うって大いに痛かった。母が大層怒おこって、お前のようなものの顔は見たくないと云うから、親類へ泊とまりに行っていた。するととうとう死んだと云う報知しらせが来た。そう早く死ぬとは思わなかった。そんな大病なら、もう少し大人おとなしくすればよかったと思って帰って来た。そうしたら例の兄がおれを親不孝だ、おれのために、おっかさんが早く死んだんだと云った。口惜くやしかったから、兄の横っ面を張って大変叱しかられた。
母が死んでからは、おやじと兄と三人で暮くらしていた。おやじは何にもせぬ男で、人の顔さえ見れば貴様は駄目だめだ駄目だと口癖のように云っていた。何が駄目なんだか今に分らない。妙みょうなおやじがあったもんだ。兄は実業家になるとか云ってしきりに英語を勉強していた。元来女のような性分で、ずるいから、仲がよくなかった。十日に一遍いっぺんぐらいの割で喧嘩けんかをしていた。ある時将棋しょうぎをさしたら卑怯ひきょうな待駒まちごまをして、人が困ると嬉うれしそうに冷やかした。あんまり腹が立ったから、手に在った飛車を眉間みけんへ擲たたきつけてやった。眉間が割れて少々血が出た。兄がおやじに言付いつけた。おやじがおれを勘当かんどうすると言い出した。
その時はもう仕方がないと観念して先方の云う通り勘当されるつもりでいたら、十年来召し使っている清きよという下女が、泣きながらおやじに詫あやまって、ようやくおやじの怒いかりが解けた。それにもかかわらずあまりおやじを怖こわいとは思わなかった。かえってこの清と云う下女に気の毒であった。この下女はもと由緒ゆいしょのあるものだったそうだが、瓦解がかいのときに零落れいらくして、つい奉公ほうこうまでするようになったのだと聞いている。だから婆ばあさんである。この婆さんがどういう因縁いんえんか、おれを非常に可愛がってくれた。不思議なものである。母も死ぬ三日前に愛想あいそをつかした――おやじも年中持て余している――町内では乱暴者の悪太郎と爪弾つまはじきをする――このおれを無暗に珍重ちんちょうしてくれた。おれは到底とうてい人に好かれる性たちでないとあきらめていたから、他人から木の端はしのように取り扱あつかわれるのは何とも思わない、かえってこの清のようにちやほやしてくれるのを不審ふしんに考えた。清は時々台所で人の居ない時に「あなたは真まっ直すぐでよいご気性だ」と賞ほめる事が時々あった。しかしおれには清の云う意味が分からなかった。好いい気性なら清以外のものも、もう少し善くしてくれるだろうと思った。清がこんな事を云う度におれはお世辞は嫌きらいだと答えるのが常であった。すると婆さんはそれだから好いご気性ですと云っては、嬉しそうにおれの顔を眺ながめている。自分の力でおれを製造して誇ほこってるように見える。少々気味がわるかった。
母が死んでから清はいよいよおれを可愛がった。時々は小供心になぜあんなに可愛がるのかと不審に思った。つまらない、廃よせばいいのにと思った。気の毒だと思った。それでも清は可愛がる。折々は自分の小遣こづかいで金鍔きんつばや紅梅焼こうばいやきを買ってくれる。寒い夜などはひそかに蕎麦粉そばこを仕入れておいて、いつの間にか寝ねている枕元まくらもとへ蕎麦湯を持って来てくれる。時には鍋焼饂飩なべやきうどんさえ買ってくれた。ただ食い物ばかりではない。靴足袋くつたびももらった。鉛筆えんぴつも貰った、帳面も貰った。これはずっと後の事であるが金を三円ばかり貸してくれた事さえある。何も貸せと云った訳ではない。向うで部屋へ持って来てお小遣いがなくてお困りでしょう、お使いなさいと云ってくれたんだ。おれは無論入らないと云ったが、是非使えと云うから、借りておいた。実は大変嬉しかった。その三円を蝦蟇口がまぐちへ入れて、懐ふところへ入れたなり便所へ行ったら、すぽりと後架こうかの中へ落おとしてしまった。仕方がないから、のそのそ出てきて実はこれこれだと清に話したところが、清は早速竹の棒を捜さがして来て、取って上げますと云った。しばらくすると井戸端いどばたでざあざあ音がするから、出てみたら竹の先へ蝦蟇口の紐ひもを引き懸かけたのを水で洗っていた。それから口をあけて壱円札いちえんさつを改めたら茶色になって模様が消えかかっていた。清は火鉢で乾かわかして、これでいいでしょうと出した。ちょっとかいでみて臭くさいやと云ったら、それじゃお出しなさい、取り換かえて来て上げますからと、どこでどう胡魔化ごまかしたか札の代りに銀貨を三円持って来た。この三円は何に使ったか忘れてしまった。今に返すよと云ったぎり、返さない。今となっては十倍にして返してやりたくても返せない。
清が物をくれる時には必ずおやじも兄も居ない時に限る。おれは何が嫌いだと云って人に隠れて自分だけ得をするほど嫌いな事はない。兄とは無論仲がよくないけれども、兄に隠して清から菓子かしや色鉛筆を貰いたくはない。なぜ、おれ一人にくれて、兄さんには遣やらないのかと清に聞く事がある。すると清は澄すましたものでお兄様あにいさまはお父様とうさまが買ってお上げなさるから構いませんと云う。これは不公平である。おやじは頑固がんこだけれども、そんな依怙贔負えこひいきはせぬ男だ。しかし清の眼から見るとそう見えるのだろう。全く愛に溺おぼれていたに違ちがいない。元は身分のあるものでも教育のない婆さんだから仕方がない。単にこればかりではない。贔負目は恐ろしいものだ。清はおれをもって将来立身出世して立派なものになると思い込んでいた。その癖勉強をする兄は色ばかり白くって、とても役には立たないと一人できめてしまった。こんな婆さんに逢あっては叶かなわない。自分の好きなものは必ずえらい人物になって、嫌いなひとはきっと落ち振れるものと信じている。おれはその時から別段何になると云う了見りょうけんもなかった。しかし清がなるなると云うものだから、やっぱり何かに成れるんだろうと思っていた。今から考えると馬鹿馬鹿ばかばかしい。ある時などは清にどんなものになるだろうと聞いてみた事がある。ところが清にも別段の考えもなかったようだ。ただ手車てぐるまへ乗って、立派な玄関げんかんのある家をこしらえるに相違そういないと云った。
</p>
<div class="panel">
<input id="keyword" placeholder="何か入力・・・">
<div class="no">
<span class="current"></span> /
<span class="all"></span>
</div>
<button type="button" id="prev">前へ</button>
<button type="button" id="next">次へ</button>
</div>
CSS
.no{
display: inline-block;
color: #fff;
}
html,body{
padding:0;
margin: 0;
}
.panel{
position: fixed;
bottom: 0;
background: #000;
width: 100%;
padding: 12px;
margin: 0;
}
input{
padding: 10px
}
.highlight{
background-color:yellow;
}
.active{
background : red;
}
javascript
<script>
function highlightKeyword(){
var keyword = $('#keyword').val();
$("body").highlight(keyword);
var id = 0;
//ヒット件数を表記
$('.all').text($('.highlight').length);
//ハイライトされたワードそぞれに番号を振る
$('.highlight').each(function (){
if(id==0){
$(this).addClass('active');
}
$(this).attr('id',"h_"+id);
$(this).data('val',id);
id++;
});
var $obj = $("#h_0");
move($obj);
}
//changeイベントでハイライト開始
$('#keyword').change(function(){
//すでにハイライトされているものをいったん消す
$("body").removeHighlight();
//ハイライト
highlightKeyword();
});
//次へボタンを押したとき
$('#next').click(function(){
var val = $(".active").data('val') + 1;
if(val == $('.highlight').length){
alert('最後まできました');
return false;
}else{
move($("#h_" + val));
}
});
//前へボタンを押したとき
$('#prev').click(function(){
var val = $(".active").data('val') - 1;
if(val => 0){
move($("#h_" + val));
}else{
alert('最初まできました');
return false;
}
});
//現在の選択状態のキーワードから次のワードのところまで移動
function move($obj){
$('.current').text($obj.data('val')+1);
$('.highlight').removeClass('active');
$obj.addClass("active");
var pos = $obj.offset();
$(window).scrollTop(pos.top);
}
</script>
