使用Greasemonkey将文本更改为图像(在静态站点上)？
使用Greasemonkey将文本更改为图像(在静态站点上)？
提问于 2013-09-10 01:36:53
是否可以使用Greasemonkey将页面上的文本链接更改为实际图像，并修改这些链接？
假设页面上有一个表，它在第二列中显示一组文件名，如下所示：<tr><td></td><td><a href="wwwlala001.html">wwwlala001.jpg</a></td>.</tr>)。是否有可能在页面加载时，第二列中的所有文件名(而不是链接)(如wwwlala001.jpg )更改为此？：
<img src="http://domain.com/images/wwwlala001.jpg" width="200" height="200" />我试着在这里修改代码，但是我没有运气：
// ==UserScript==
// @name _Image delinker
// @include http://dotup.org
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// ==/UserScript==
var imageExtensions = ["gif", "png", "jpg", "jpeg"];
var imgExtRegex = new RegExp(
'\\.(' + imageExtensions.join ('|') + ')$', 'i'
);
/*-- Tune the CSS path, for each site, to only find links that can be
the image links you care about.
*/
//-- For forums.hardwarezone.com.sg
waitForKeyElements ("page div > a", delinkImage);
function delinkImage (jNode) {
var imgUrl = jNode.attr ("href");
if (imgExtRegex.test (imgUrl) ) {
//-- Found an image link. Replace contents.
jNode.html (
'<img src="http://domain.com/images/' + imgUrl
+ '" width="200" height="200" class="gmDeLinked" alt="GM replaced image">'
);
}
}
GM_addStyle ( " \
img.gmDeLinked { \
border: 1px solid lime; \
max-width: 90vw; \
} \
" );
/*
Exception: waitForKeyElements is not defined
@Scratchpad/2:18
*/谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-10 02:32:10
下面是静态站点的经典、简单的方法，使用jQuery：
// ==UserScript==
// @name _image delinker, static site
// @include http://dotup.org/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var imageExtensions = ["gif", "png", "jpg", "bmp"];
var imgExtRegex = new RegExp(
'\\.(' + imageExtensions.join ('|') + ')$', 'i'
);
//-- This jQuery selector is custom for each new site...
var imgLinks = $("table tr td > a")
//-- Also custom for the site...
var urlBase = "http://www.dotup.org/uploda/";
//-- Remove non-image links.
imgLinks.filter ( function() {
return imgExtRegex.test (this.textContent);
} );
imgLinks.each ( function () {
var jThis = $(this); // This is one of the links
var filename = $.trim (jThis. text () );
//-- Rreplace link content with image:
jThis.html (
'<img src="' + urlBase + filename + '" height="200" />'
);
} );备注：
- 从不使用为这种脚本使用
@include *！ - 这假设图像基URL始终是相同的。
- 初始选择器应调整到网站，以避免不愉快的副作用。
- 如果你敲一些网站，像这样的快速图像请求，他们会扼杀你。你只会得到一些图片，和/或你将被禁止/封锁。
- 像这样设置高度和宽度都会扭曲大多数图像。只需设置一个或另一个。
Stack Overflow用户
发布于 2013-09-10 02:03:27
我不是一个用户脚本专家，但我有一个来自这里的脚本。原来的网站已经关闭了，但这是脚本。
// ==UserScript==
// @name Inline Image Relinker
// @namespace /web/20070712085327/http://www.sitzmar.com
// @description Replaces links to images with the actual image
// @include *
// ==/UserScript==
(function()
{
function getXPath(p, context)
{
var arr = new Array();
var xpr = document.evaluate(p,context,null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for(i = 0;item = xpr.snapshotItem(i); i++)
{
arr.push(item);
}
return arr;
}
doc = window.document;
var xpath = "//A[(contains(@href, '.jpg') or contains(@href, '.jpeg') or contains(@href, '.gif') or contains(@href, '.bmp') or contains(@href, '.png')) and not(contains(@href, '.php') or contains(@href, '.asp'))]";
results = getXPath(xpath, doc);
for(i = 0; i < results.length; i++)
{
var img = document.createElement("img");
var source = results[i].getAttribute("href");
img.setAttribute("src", source);
img.setAttribute("class", "what");
results[i].textContent = "";
results[i].appendChild(img);
}
}
)();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18709491
复制相关文章
相似问题
腾讯云开发者
