如何从内容中隐藏特定的文本而不调用任何CSS

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

本文关键字:文本 调用 CSS 任何 隐藏      更新时间:2023-09-26

我需要从下面的内容中只隐藏单词"QUICK",而不调用任何类或更改标记。这在纯CSS中是不可能的,也许我们可以这样做JavaScript/jQuery和调用QUICK作为一个变量,并使用CSS来隐藏。我不擅长Java编码,所以有人可以帮助这周围?

的例子:

<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>

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

查找quick的所有出现,并将它们包裹在通过css隐藏的特定元素(例如<del>)中

CSS

p del {
   display: none;
}
jQuery

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

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

查看当前文件

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

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

<!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>