ページ内検索を自ページに設置
= ヒットしたテキストをハイライト表示 =

  • ページ内の文字検索をご自身のページに設置する方法を紹介します。
  • ヒットしたテキストがハイライト表示されます。
  • 対象となるテキストが複数ある場合、最初の場所スクロールします。
    • スクロール機能は、Windows Edge, Windows IE では作動しないようです。
  • キーボードの「Ctrl + F」「⌘ command + F」を使った検索では、ページ内の広告なども含め全てのテキストが検索の対象となりますが、このプログラムでは、「<div id="target"></div>」で設定した部分だけを検索の対象とすることができます。
  • 下記の「CSS」「JavaScript」「HTML」をコピーして、ご自身のページに設置することができます。
  • 「CSS」は、ページデザインなどに合わせて適宜変更してください。
《サンプル》
script」「コピー」「スクロール」「終了」などの文字を入力してみてください。
《CSS》
<!-- ページ内検索ハイライトのカラーなど -->
<style>
.highlight{
font-weight:bold;
background-color:Yellow;
}
</style>
《JavaScript》
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- jquery.highlight-5.js プラグイン -->
<script>
/*
highlight v5
Highlights arbitrary terms.
<https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
MIT license.
Johann Burkard
<https://johannburkard.de>
<mailto:jb@eaio.com>
*/
jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
pos -= (node.data.substr(0, pos).toUpperCase().length - node.data.substr(0, pos).length);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.length && pat && pat.length ? this.each(function() {
innerHighlight(this, pat.toUpperCase());
}) : this;
};
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
</script>
<!-- Highlight & 最初の文字へスクロール -->
<script>
function doHighlight() {
var word = $("#word").val()
.replace(/^\s+|\s+$/g, "")
.replace(/\s+/g, " ")
.split(" ");
for (i in word) {
if (word[i] != "") {
$("#target").removeHighlight();
$("#target").highlight(word[i]);
var ypos = $(".highlight").offset().top;
window.scrollTo({
left: 0,
top: ypos,
behavior: "smooth"
});
}
}
}
</script>
《HTML》
<form name="highlight">
<input type="text" id="word" placeholder="ページ内テキスト検索" /> <input type="button" onclick="doHighlight()" value="検索" /> <a href="javascript:void($('#target').removeHighlight());"><input type="submit" value="リセット"></a>
</form>
<!-- ハイライトのターゲットとする範囲 - 開始 -->
<div id="target">
本文テキスト
</div>
<!-- ハイライトのターゲットとする範囲 - 終了 -->

おすすめサイト・関連サイト…

Last updated : 2020/05/20