:contains()不返回预期的节点 [英] :contains() does not return the expected nodes
问题描述
请考虑以下代码:
// @include /(^https?:\/\/www\.|^https?:\/\/)google\.com(\.|\/).*/
// @include /(^https?:\/\/www\.|^https?:\/\/)stackoverflow\.com\/.*/
// @include /(^https?:\/\/www\.|^https?:\/\/)userscripts-mirror\.org\/.*/
// @include http://wiki.greasespot.net/*
// @version 1.0
// @require https://code.jquery.com/jquery-2.1.1.min.js
// @grant GM_addStyle
$ ( 'body:contains("serscripts.org")').each ( function () {
var results = $(this);
var text = results.text();
console.log(text);
text = text.replace( /serscripts\.org/ig, "serscripts-mirror.org" );
text = text.replace( /(:8080|%3A8080)/ig, "");
//results.text ( text );
} );
我希望返回的内容应该只是包含该字符串的元素,但是控制台上的结果是正文的所有文本.
I expected the return should be just the elements containing that string, but the result on the console is all the text of the body.
考虑此页面在以下行:
// @updateURL https://userscripts.org/scripts/so...
我要更改它.
或者这一个:
// @require http://userscripts.org/scripts/source...
我也想改变.
应检查标记之间的所有单词是否为字符串,并仅返回具有该单词的单词.
All words between tags should be checked for the string, and return only the ones that have it.
最合适的选择器是什么?
What is the right selector for this?
注意:
<a></a>
之间的链接属性和文本已经使用类似的.each ( function )
进行了更改.
Note:
Link attributes and text between <a></a>
are already changed using a similar .each ( function )
.
推荐答案
:contains
完全返回了预期的结果.从规范:
:contains
is returning exactly what is expected. From the spec:
匹配的文本可以直接出现在所选元素中,该元素的任何后裔或它们的组合中.
The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof.
通常,要替换,环绕或突出显示网页上的文本术语,您需要在各个TEXT_NODE
级别上进行操作.其他还有可能造成垃圾回收的风险:URL,ID,事件处理程序等.
In general, to replace, wrap or highlight text terms on a web page, you need to work at the individual TEXT_NODE
level. Anything else risks trashing: URL's, id's, event handler's, etc.
您可以为此使用 Tree Walker :
var txtWalker = document.createTreeWalker (
document.body,
NodeFilter.SHOW_TEXT,
{ acceptNode: function (node) {
//-- Skip whitespace-only nodes
if (node.nodeValue.trim() )
return NodeFilter.FILTER_ACCEPT;
return NodeFilter.FILTER_SKIP;
}
},
false
);
var txtNode = null;
while (txtNode = txtWalker.nextNode () ) {
var oldTxt = txtNode.nodeValue;
var newTxt = oldTxt.replace (/serscripts\.org/ig, "serscripts-mirror.org");
newTxt = newTxt.replace (/(:8080|%3A8080)/ig, "");
txtNode.nodeValue = newTxt;
}
这将安全地处理页面上的所有内容,除了href
,src
等HTML属性.
this will safely take care of everything on the page, except for HTML attributes like href
, src
, etc.
如果您希望更改它们,请使用单独的,有针对性的.each ()
代码-就像您说的那样-但不要更改<a></a>
之间的文本,因为树行者已经完成了此操作.
If you wish to change those, use separate, targeted .each ()
code -- like you said you were doing -- but do not change the text between <a></a>
as that will already have been done by the tree walker.
这篇关于:contains()不返回预期的节点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!