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

Question

sachipanda

6

6もっと見る

85pt

インターネットウェブ制作

「サーバーに置いてある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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

kawasaki5592009/12/23 02:55:05

35pt

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

WindowsXPにおいて

FireFox 3.5.6
IE6.0
Google Chrome 3.0

で確認済みです。

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

http://jquery.com/

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

<!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>

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

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

2009/12/23 22:24:34

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

kn1967 · Accepted Answer · 2009-12-23T06:24:51+09:00

（１）文字のある範囲だけ反転

// ==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);
    }
}

（２）ブラウザの端まで反転

// ==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);
    }
}

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

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

kn1967 · Accepted Answer · 2009-12-23T06:24:51+09:00

（１）文字のある範囲だけ反転

// ==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);
    }
}

（２）ブラウザの端まで反転

// ==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);
    }
}

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

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

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

ベストアンサー

kn196729153012009/12/23 06:24:51

その他の回答（1件）

kawasaki5592009/12/23 02:55:05

kn196729153012009/12/23 06:24:51ここでベストアンサー

コメント（0件)

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