Searching for text (Ctrl+F) across hidden spans

Question

Is it possible to search for text using your browser's Ctrl+F function across three span tags if the middle tag is set to hidden? For example:

<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text.</span>

If .hiddenText is set to display:none, the web browser will show "Trying text." If you search using Ctrl+F in a web browser, however, you will stop matching the string after "Trying ". You can highlight the whole phrase "Trying text" and press Ctrl+F, which will pop the phrase into your search box, but clicking the find-next-match button will yield no results.

Is there any way of making that whole phrase searchable? For an example, check out: http://jsfiddle.net/surrealmind/qo2ens33/.

With "whole phrase", do you mean "Trying text." or "Trying to search text."? — Oriol, Aug 26 '14 at 18:18
"Trying text." Sorry, and good point: I should have been more specific. — Daniel, Aug 26 '14 at 18:23
--And thanks to ctwheels for a (since deleted) way of getting "Trying to search text" when the middle tag is hidden; I didn't know this was possible, either. — Daniel, Aug 26 '14 at 18:27

ctwheels · Accepted Answer · 2014-08-27T13:05:34.570

1

This works

http://jsfiddle.net/qo2ens33/2/

HTML

<span class="visibleText">Trying</span>
<div class="hiddenText"><span>to search</span></div>
<span class="visibleText">text</span>

CSS

.hiddenText{
    width:0px;
    height:0px;
    overflow:hidden;
    display:inline-block;
}

This works too

http://jsfiddle.net/ctwheels/qo2ens33/5/

HTML

<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text</span>

CSS

.hiddenText {
    position:absolute;
    opacity:0;
    width:0px;
}

Not sure if this is what you're looking for

Ok, I think this is what you're looking for... You can't (as far as I know) search for two separate spans together, so what I've done is I've added the visible spans together

http://jsfiddle.net/ctwheels/qo2ens33/6/

Using this code:

JS

var numberOfElements = $(".visibleText").length;
for (var i = 1; i < numberOfElements; i++) {
    $(".visibleText:eq(0)").append(" " + $(".visibleText:eq(1)").text());
    $(".visibleText:eq(1)").remove();
}

edited Aug 27 '14 at 13:05

answered Aug 26 '14 at 18:18

ctwheels

21,901
9
42
77

Thanks, these are good methods for finding "Trying to search text". Is there any good way of finding just "Trying text" with "to search" removed? – Daniel Aug 26 '14 at 18:46
I've added another answer to my answers, like the last one? – ctwheels Aug 26 '14 at 19:38
Very nice, we are getting somewhere. Ideally, we would not need to use JQuery, but it looks like it might not be possible with just css and html alone, eh? And what about one last wrinkle? What if we wanted to put the .hiddenText back in place? If I set the JQuery to display the .hiddenText after your rearrangement, the formerly hidden text now (obviously) appears at the end of the line instead of in its original position: http://jsfiddle.net/surrealmind/qo2ens33/7/ – Daniel Aug 26 '14 at 20:34
By this, do you mean back into the sentence as it was before (and seen)? Could you be more specific? – ctwheels Aug 26 '14 at 20:37
Yes, to reconstruct the sentence as if nothing were hidden in the first place: "Trying to search text" – Daniel Aug 26 '14 at 20:38
By george, that does it--thanks! It seems like this should be solvable with simple CSS and html, but I'll gladly accept the Javascript solution. – Daniel Aug 26 '14 at 22:00
If you want an HTML solution, the closest I think you can get is by using the
tag. If you're looking for a CSS solution, the closest you can come is using the hover event to show/hide elements. The reason I went with js for the answer, however, was because you specified that you wanted the entire sentence to be "searchable" using Ctrl + F
– ctwheels Aug 26 '14 at 22:06

Oriol · Answer 2 · 2014-08-26T18:22:12.433

0

With this you can find "Trying to search text." but not "Trying text.":

.hiddenText{
    position: absolute;
    top: -10000cm;
    left: -10000cm;
}

Demo

edited Aug 26 '14 at 18:22

answered Aug 26 '14 at 18:14

Oriol

274,082
63
437
513

Thank you, Oriol; now if we could only find a way to "Trying text." – Daniel Aug 26 '14 at 18:31

score 0 · Answer 3 · answered Nov 14 '16 at 23:24

This isn't exactly what you want but it does accomplish "hidden text". I think the positioning could be tweaked to fit your purpose.

.parent {
  height: 2em;
  width: 400px;
  background: white;
  position: relative;
}

.hiddenText {
  width: 100%;
  overflow: visible;
  display: inline-block;
  position: absolute;
  color: transparent;
  bottom: 0;
  left: 0;
  cursor: default;
}
.hiddenText::selection {
  background: rgba(0,0,0,0);
}

http://jsfiddle.net/nbzv9thL/

Searching for text (Ctrl+F) across hidden spans

3 Answers3

Linked