CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mknayab
mknayab

Reputation: 302

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

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?

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!

Upvotes: 1

Views: 12240

Answers (3)

Sagar Dalvi
Sagar Dalvi

Reputation: 200

see the fiddle jsfiddle now its working

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

Upvotes: 1

Lalith B
Lalith B

Reputation: 12239

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>

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

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

CSS 

p del {
   display: none;
}

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/

Upvotes: 6

Related Questions