Hide a string using jQuery?

Question

I want to hide strings inside a div. Consider the following example where I want to hide "some".

<div id="Disappear">Here is some text.</div>

After calling the function it should be

<div id="Disappear">Here is      text.</div>

Notice that the space remains reserved. Also the sentence and string to be hidden are random.

What have I tried?

Replacing the string with spaces. The solution is not elegant, since the width of the spaces can't always be equal to the string.

UPDATE I can't use <span> either. The actual div contains a lot more strings, using span is not an option.

No, if you want something hidden and still taking space you use the CSS visibility property. Its what its designed for. w3.org/TR/CSS2/visufx.html#propdef-visibility It will not render a box but will still consider it for layout purposes. And I suspect it does what you want better with accessibility considerations too (what if the user is ignoring your choice of colours?). — Chris
– Chris, Commented Jul 20, 2012 at 9:59
If you can't use span, you won't be able to hide text. You may try to replace the word with blank spaces, but the layout may change if you don't use a fixed width font. — Steve B
– Steve B, Commented Jul 20, 2012 at 10:01
Thanks all, paulslater19 example is what I wanted and what you all were suggesting. Its an elegant solution. — Ashwin Singh
– Ashwin Singh, Commented Jul 20, 2012 at 10:04

paulslater19 · Accepted Answer · 2012-07-20 10:02:13Z

5

Here's a quick example - it wraps the search text in a span, which (through css) changes the visibility to hidden

Update - as mentioned in comments, {visibility: hidden} is better than {color: #fff}

answered Jul 20, 2012 at 10:02

paulslater19

5,9171 gold badge30 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

this is really nice and simple, great job!

I am not very good at using Regexs, can you modify it to only hide first matched string?

@AshwinSingh it's the "g", which means "global search" that was matching all of them. Here is an example with it removed: jsfiddle.net/4kTVC/2