人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

「サーバーに置いてあるtxtファイルをブラウザで表示させて、内容を確認しています。
1行ずつに1レコードという感じなのですが、その中で、ある文字列があるレコードは、
そのレコード1行全ての文字の背景に色をつけて表示したいのです。

例えば、

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

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

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

●質問者: sachipanda
●カテゴリ:インターネット ウェブ制作
✍キーワード:firefox Greasemonkey JavaScript txt りんご
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kawasaki
●35ポイント

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

WindowsXPにおいて

で確認済みです。

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>
◎質問者からの返答

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

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


2 ● kn1967
●50ポイント ベストアンサー

(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);
 }
}

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ