Make HTML content not react on search (Ctrl+F)

Question

In my web app I have a layer with a static HTML content that displays a text.

When I do a search on a page (ctrl+F) and type some text that is contained in the layer

Answer 1

Try to render the text with SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

http://www.w3schools.com/svg/svg_text.asp

Edit: After further probing it seems that to prevent search you have to put the SVG in separate file:

<object height="30" width="500" data="text1.svg" type="image/svg+xml">
  <embed src="text1.svg" type="image/svg+xml">
</object>

Answer 2

Disable-CTRL-F-jQuery-plugin

How to use:

Include jQuery and disableFind.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="disableFind.js"></script>

Call the disableFind() function on the element(s) you want to make unsearchable.

$('p').disableFind();               // make all paragraphs unsearchable

$('.unsearchable').disableFind();   // make all elements with "unsearchable" class unsearchable

$(body).disableFind();              // make all text on page unsearchable

Answer 3

One work-around is to use the CSS content declaration to inject the text on your page. See answer for similar question here

Answer 4

The only option not to reveal on search is to make that an image or an external media like Flash. It is a generic browser feature (Ctrl + F) which displays that text, if it exists on the screen will be highlighted.

Answer 5

You can prevent searching in your page. It is somewhat limited but you can check if it fits.

window.onkeydown = function(e){
  if(e.ctrlKey && e.keyCode == 'F'.charCodeAt(0)){
    e.preventDefault();
    // Comment out this last one...
    alert('Ctrl+F');
  }
}

See fiddle: http://jsfiddle.net/ozrentk/g4wrd/

Answer 6

If all you want is for the highlighted text to be the same color as the surrounding text, you can change the highlight color in many browsers. Assuming the normal text is black on white,

::-moz-selection {
  background: white;
  color: black;
}
::-webkit-selection {
  background: white;
  color: black;
}​
::selection {
  background: white;
  color: black;
}

will hide the highlight, while keeping the normal select-functionality.

See also Changing the text selection color using CSS?