如何使用Javascript隐藏页面加载的特定句子(How to hide specific sentence on page load with Javascript)

我需要从下面的内容中隐藏一个特定的句子“明天的领导者，很棒”而不会打电话给任何课程或者div。

例：

<p>The leader of tomorrow, are great leaders</p> <br> The leader of tomorrow, are great leaders of tomorrow.

任何解决方案将不胜感激。

I need to hide a specific sentence "The leader of tomorrow, are great" from the content below without calling any class or div.

Example:

<p>The leader of tomorrow, are great leaders</p> <br> The leader of tomorrow, are great leaders of tomorrow.

Any solution to this would be appreciated.

最满意答案

为什么jQuery('*:contains("sentence to hide")')不适用于这种情况？

它将匹配包含该句子的所有元素。 因此它将匹配最近的节点，但另外所有父节点都会一直向上。 因此，代替匹配元素，例如在这种情况下，“P节点”它也将匹配body，html甚至脚本本身，如果它是内联的，因为它也包含句子！ 如果实际包含要隐藏的句子的元素被包裹，请说：

<div id="_1"> <div id="_2"> <div id="_3"> <p id="_4">sentence to hide</p> </div> </div> </div>

然后用jQuery('*:contains("sentence to hide")')你会得到一个jQuery集合 [{html}，{body}，{＃_1}，{＃_2}，{＃_ 3}，{＃_ 4}]

---

这是另一种方法......

jQuery( document ).ready(function(){ jQuery('body').html(function(iIndex, sHtml) { return sHtml.replace(/The leader of tomorrow, are great/g, ''); }); });

或者为了拥有更多的控制权，你可以根据自己的喜好包装句子和样式包装器...

jQuery( document ).ready(function(){ var sNeedle = 'The leader of tomorrow, are great'; jQuery('body').html(function(iIndex, sHtml) { return sHtml.replace( new RegExp(sNeedle, 'g'), '<span class="hide-specific-sentence">' + sNeedle + '</span>' ); }); });

然后在你的CSS中：

.hide-specific-sentence{ display: none; }

笔记：

我不建议像这样处理网页内容，但如果你因任何原因必须这样做，你可以这样做

将selcetor缩小到最接近可能的父级，实际包含句子可能是“.content”或其他什么

因为附加的事件处理程序可能会丢失（取决于它们的绑定方式）

如果您尝试将代码作为SO片段，则会出现错误。 这可能是由于一些内部限制（我猜）。 但是我尝试了它本地，它就像一个魅力或你可以尝试使用这个工作PEN ，也像一个魅力...

Why does jQuery('*:contains("sentence to hide")') not work on this scenario?

It will match all elements that contain the sentence. So it will match the closest node but in addition all parent nodes all the way up. So instead of matching element eg in this case the "P-node" it will also match for body, html and even the script itself if it is inline because it also contains the sentence! And if the element that actual contains the sentence to hide is wrapped by lets say:

<div id="_1"> <div id="_2"> <div id="_3"> <p id="_4">sentence to hide</p> </div> </div> </div>

Then with jQuery('*:contains("sentence to hide")') you will get a jQuery collection with [{html}, {body}, {#_1}, {#_2}, {#_3}, {#_4}]

---

Here is another approach...

jQuery( document ).ready(function(){ jQuery('body').html(function(iIndex, sHtml) { return sHtml.replace(/The leader of tomorrow, are great/g, ''); }); });

Or to have more control you can wrap the sentence and style the wrapper as you like...

jQuery( document ).ready(function(){ var sNeedle = 'The leader of tomorrow, are great'; jQuery('body').html(function(iIndex, sHtml) { return sHtml.replace( new RegExp(sNeedle, 'g'), '<span class="hide-specific-sentence">' + sNeedle + '</span>' ); }); });

and then in your CSS:

.hide-specific-sentence{ display: none; }

NOTES:

I would not recommend to treat web content like this but if you have to for whatever reason you can do it this way

narrow the selcetor to the closest possible parent that actual contains the sentence(s) maybe ".content" or whatever

make shure that you do this action before anything else because attached event handlers could get lost (depending on the way they are bound)

If you try the code as SO snippet you will get an error. This is propably due to some internal restrictions (I guess). But I tried it local and it works like a charme or you can try with this working PEN that also works like a charme...