「サーバーに置いてあるtxtファイルをブラウザで表示させて、内容を確認しています。

1行ずつに1レコードという感じなのですが、その中で、ある文字列があるレコードは、
そのレコード1行全ての文字の背景に色をつけて表示したいのです。

例えば、

「1 東京都 りんご 100円
 2 埼玉県 バナナ 500円
 3 大阪府 りんご 100円」

というデータだった場合に、「りんご」という文字列のある行(この場合、1と3)の文字列全ての
背景の色を赤くすると言った感じです。

ブラウザはFirefoxを使用しているのですが、GreaseMonkeyやJavascriptなどで、
これが実現できる方法があれば、教えてください。

回答の条件
  • 1人3回まで
  • 登録:2009/12/23 01:55:40
  • 終了:2009/12/23 22:25:08

ベストアンサー

id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/12/23 06:24:51

ポイント50pt

(1)文字のある範囲だけ反転

// ==UserScript==
// @name           markup
// @auther         kn1967
// @namespace
// @description    markup
// @include        *
// @exclude
// ==/UserScript==
if (location.href.match(/\.txt$/i)) {
    var p = document.body.firstChild.textContent.split(/\r\n|\r|\n/g);
    document.body.removeChild(document.body.firstChild);
    var e = document.createElement("style");
    e.textContent = "span.m { color:#FFFFFF; background-color:#000000; }";
    document.body.appendChild(e);
    for each(v in p) {
        e = document.createElement("span");
        e.textContent = v;
        if (v.match(/りんご/)) {
            e.className = "m";
        }
        document.body.appendChild(e);
        e = document.createElement("br");
        document.body.appendChild(e);
    }
}

(2)ブラウザの端まで反転

// ==UserScript==
// @name           markup
// @auther         kn1967
// @namespace
// @description    markup
// @include        *
// @exclude
// ==/UserScript==
if (location.href.match(/\.txt$/i)) {
    var p = document.body.firstChild.textContent.split(/\r\n|\r|\n/g);
    document.body.removeChild(document.body.firstChild);
    var e = document.createElement("style");
    e.textContent = "div.m { color:#FFFFFF; background-color:#000000; }";
    document.body.appendChild(e);
    for each(v in p) {
        e = document.createElement("div");
        e.textContent = v;
        if (v.match(/りんご/)) {
            e.className = "m";
        }
        document.body.appendChild(e);
    }
}

※ファイルサイズの上限等はクライアント環境に依存します。

※色は、白黒反転にしてますが、適宜変えてください。

id:sachipanda

ありがとうございます!理想通りの動作でした!

2009/12/23 22:23:27

その他の回答(1件)

id:phero No.1

kawasaki回答回数55ベストアンサー獲得回数92009/12/23 02:55:05

ポイント35pt

ちょっと強引ですが、これで実行出来ました。

WindowsXPにおいて

  • FireFox 3.5.6
  • IE6.0
  • Google Chrome 3.0

で確認済みです。

jQueryはこちらのサイトからダウンロードして下さい。

これでご期待に添えますでしょうか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	function init() {
		$.get("http://xxxxx.jp/xxx.txt", function(data) {
			var arr = data.split("\n");
			var div = $("div#output");
			for (var i = 0; i < arr.length; i++) {
				var src = div.html();
				var color = arr[i].indexOf("りんご") >= 0 ? "#f00" : "#fff";
				var new_src = '<span style="background-color:' + color + ';">' + src + arr[i] + "<br /></span>";
				div.html(new_src);
			}
		});
	}
</script>
</head>
<body onLoad="init();">
	<div id="output">
	</div>
</body>
</html>
id:sachipanda

ありがとうございます!動作確認できました!

Firefox以外のブラウザで使用する場合に、重宝しそうです。

2009/12/23 22:24:34
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/12/23 06:24:51ここでベストアンサー

ポイント50pt

(1)文字のある範囲だけ反転

// ==UserScript==
// @name           markup
// @auther         kn1967
// @namespace
// @description    markup
// @include        *
// @exclude
// ==/UserScript==
if (location.href.match(/\.txt$/i)) {
    var p = document.body.firstChild.textContent.split(/\r\n|\r|\n/g);
    document.body.removeChild(document.body.firstChild);
    var e = document.createElement("style");
    e.textContent = "span.m { color:#FFFFFF; background-color:#000000; }";
    document.body.appendChild(e);
    for each(v in p) {
        e = document.createElement("span");
        e.textContent = v;
        if (v.match(/りんご/)) {
            e.className = "m";
        }
        document.body.appendChild(e);
        e = document.createElement("br");
        document.body.appendChild(e);
    }
}

(2)ブラウザの端まで反転

// ==UserScript==
// @name           markup
// @auther         kn1967
// @namespace
// @description    markup
// @include        *
// @exclude
// ==/UserScript==
if (location.href.match(/\.txt$/i)) {
    var p = document.body.firstChild.textContent.split(/\r\n|\r|\n/g);
    document.body.removeChild(document.body.firstChild);
    var e = document.createElement("style");
    e.textContent = "div.m { color:#FFFFFF; background-color:#000000; }";
    document.body.appendChild(e);
    for each(v in p) {
        e = document.createElement("div");
        e.textContent = v;
        if (v.match(/りんご/)) {
            e.className = "m";
        }
        document.body.appendChild(e);
    }
}

※ファイルサイズの上限等はクライアント環境に依存します。

※色は、白黒反転にしてますが、適宜変えてください。

id:sachipanda

ありがとうございます!理想通りの動作でした!

2009/12/23 22:23:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません