2008年9月21日日曜日

Greasemonkey で特定のリンクをハイライト

1. 特定のリンクを目立たせたい

条件を指定して、一致したリンクをハイライトして目立たせたい。ただし、

  1. 条件は、正規表現で指定。
  2. 除外条件も設定できること。

デフォルトでは、開いているページのホスト名ではじまるリンクのみをハイライトする。

 

2. 使い方

前提: Greasemonkey がインストールしてあること。

こちらをクリックしてインストール → highlight_link.user.js

 

3. 実装方法

リンクを目立たせるために、DOM 要素の style プロパティを設定する。

CSS – MDC には、Gecko1.8+ DOM において、要素の style プロパティで設定できる項目の一覧がある。

The following is a list of the CSS properties that are supported in the Gecko 1.8+ DOM and accessible by means of the style property on elements.

style プロパティを設定するとき、同じ要素に対して複数のプロパティを設定する。この場合、JavaScript の with – MDC を使うと書きやすい。

要素の反復については、「JavaScript における 3 つの for 文」を参照。

 

4. 実装

使い方は、

  • `INCLUDE_REGEXP’ に、 ハイライトしたい A タグの src に含まれる文字列を正規表現で指定する。
  • `EXCLUDE_REGEXP’ に、 ハイライトしたくない A タグの src に含まれる文字列を正規表現で指定する。 (省略可)

// ==UserScript==
// @name           highlight link
// @namespace      http://jutememo.blogspot.com/
// @description    特定のリンクを目立たせる
// @include        http://*
// ==/UserScript==

(function() {
 // 対象にしたい a タグの src に含まれる文字列を正規表現で指定
 var INCLUDE_REGEXP = "^" + location.protocol + "//" + 
          location.hostname + ".*()";
 // 除外したい a タグの src に含まれる文字列を正規表現で指定
 var EXCLUDE_REGEXP = "";
 
 // 指定された要素を目立つようにする
 // cf. CSS - MDC 
 function highlightElem(e){
  with(e.style){
   backgroundColor = "#fcc"
   borderWidth = "1px";
   borderColor = "#f00";
   borderStyle = "solid";
   borderWidth = "3px";
//   fontSize = "large";
  }
 }
 // リンクを除外するための正規表現オブジェクトを生成
 function createExcludeRegExp(){
  return EXCLUDE_REGEXP ? new RegExp(EXCLUDE_REGEXP) : null;
 }
 function highlight(re, notRe){
  var anchors = document.getElementsByTagName("a");
  for (var i = 0; i < anchors.length; i++){
   href = anchors[i].href;
   if (!href.match(re) || href.match(notRe)) continue;
   highlightElem(anchors[i]);
  } 
 }
 
 highlight(new RegExp(INCLUDE_REGEXP), createExcludeRegExp())
})();

1コメント:

トイプー さんのコメント...

コンニチワ♪
突然申し訳ございません!
Firefox/Chrome用のスクリプトの書き方が分からずたどり着きました・・・
特定のリンクだけでなく、下記のように普通の文字列も置き換えて
さらに目立たせたいのですがどのように書けばいいでしょうか?

(function() {
const PATTERN = {
__proto__: null,
'寿がきや' : 'スガキヤ' ,
'拉麺' : 'ラーメン' ,
};
const PATTERN_SHORTCUT = RegExp([x for (x in PATTERN)].join('|'), 'gi');

replace(document);

document.addEventListener('DOMNodeInserted', function(event) {
replace(event.target);
}, false);

function replace(target) {
target.normalize();
var x = document.evaluate('descendant::text()', target, null, 6, null);
for (var i = 0, len = x.snapshotLength; i < len; i++) {
var textNode = x.snapshotItem(i);
textNode.nodeValue = textNode.nodeValue.replace(PATTERN_SHORTCUT, function($0) PATTERN[$0.toLowerCase()]);
}
}
})();

※このあと上で置き換えた単語を
<Font color=”Red”>スガキヤ</Font>
<Font color=”Blue”>ラーメン</Font>のように目立たせたいんです
---