Hide specific word in a text without add new tag

user_12963227 0
Viewed 537

I have this code:

<div>Lorem ispum custom test</div>

I would hidden only and not remove the word "custom" without add any new tag.

How can i do? Thanks

hide css html jquery javascript
3 Answers

You can use mask or clip-path. Note that this is not a robust solution as you need to adjust the value based on the font properties and the real text:

.box {
  /* the text to hide start at 90px and end at 137px */
  -webkit-mask:linear-gradient(to right,#fff 90px,transparent 0 137px,#fff 0)
}
<div class="box">Lorem ispum custom test</div>

With clip-path:

.box {
  /* the text to hide start at 90px and end at 137px */
  clip-path: polygon(0 0, 90px 0, 90px 100%, 137px 100%, 137px 0, 100% 0, 100% 100%, 0 100%);
}
<div class="box">Lorem ispum custom test</div>

user_86203330

Unfortunately, you can't do that with CSS but you can replace the word with jQuery like so:

jQuery(document).ready( function($){
  $('div').each(function(){
    var txt = $('div').text();
    var res = txt.replace('custom', '');
    $('div').text(res);
  });
});

Important: have in mind that this will go through all your divs since there is no class or id attribute for your div

Please also check w3schools

user_134981330

and this is how you can use your Array later.

var strings = [];
var str = document.getElementById("par");
if (str.textContent.includes("one")){
  var now = str.textContent.replace("one ", "");
  str.textContent = now;
  strings.push("one ")
};
console.log(strings)
<p id="par">this one is changed</p>

user_112593040
Related