javascript 如何在不调用任何 CSS 的情况下从内容中隐藏特定文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15361542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 00:31:44  来源:igfitidea点击:

How to hide specific text from content wihtout calling any CSS?

javascriptjqueryhtmlcss

提问by mknayab

I need to hide only word "QUICK" from the content below without calling any class or changes in Markup. It is not possible in pure CSS, probably we can do this JavaScript / jQuery and call QUICK as a variable and use CSS to hide. I am not good in Java coding so can anyone help this around?

我只需要从下面的内容中隐藏单词“QUICK”,而无需调用任何类或更改标记。这在纯 CSS 中是不可能的,也许我们可以做这个 JavaScript / jQuery 并调用 QUICK 作为变量并使用 CSS 来隐藏。我不擅长 Java 编码,所以任何人都可以帮助解决这个问题吗?

Example:

例子:

<html>
<p>The quick brown fox jump over the lazy dog.</p>
<p>The quick brown fox is too hungry.</p>
<p>The poor quick brown fox is tired and thirsty.</p>
</html>

Please provide solution in JSFiddle, if possible. Thanks in advance!

如果可能,请在 JSFiddle 中提供解决方案。提前致谢!

回答by Fabrizio Calderan

Find all occurences of quickand wrap them intp a specific element (e.g. <del>) hidden via css

查找所有出现的情况quick并将它们包装在一个特定的元素(例如<del>)通过 css 隐藏

CSS

CSS

p del {
   display: none;
}

jQuery

jQuery

$('p').each(function() {
   var $this = $(this);
   $this.html($this.text().replace(/\bquick\b/g, '<del>quick</del>'));
});

Example jsbin: http://jsbin.com/ogakit/1/

示例jsbin:http://jsbin.com/ogakit/1/

回答by Sagar Dalvi

see the fiddle jsfiddlenow its working

看小提琴jsfiddle现在它的工作

$(document).ready(function(){
$('p').each(function () {
    var $this = $(this);
   $this.html($this.text().replace(/\bquick\b/g, '<span style="display:none">quick</span>'));
    });
});

回答by Lalith B

I think this is what you want ..!!

我想这就是你想要的..!!

<!DOCTYPE html>
<html>
<body id ="demo">

<p>The quick brown fox jump over the lazy dog.</p>
<p>The quick brown fox is too hungry.</p>
<p>The poor quick brown fox is tired and thirsty.</p>


<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML; 
var n=str.replace("quick","HIDDEN");
document.getElementById("demo").innerHTML=n;
}
</script>

</body>
</html>