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!

Answers:

Answer

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/

Answer

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>'));
    });
});
Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.