Is it possible to mark text as non-searchable?

Question

I sometimes have text on websites which does not make sense to be searchable (e.g. when I have a long list and the user can apply some actions to each element. He might search for an element of the list, but then also "finds" the actions). So when the user presses Ctrl+f and enters the same text, he should not get these results.

Is that possible without using images?

(I manly care about the most recent Google Chrome version)

Hopefully not. Some people might use search in ways you shouldn't care about. If you want site-specific search functionality then implement search. — Dave Newton, Apr 10 '15 at 12:30
Let me understand this correctly, you have a list of items. Each one is either a link or has a form on it and you are attempting to stop people from searching the page and stopping them from using the link/form? If that is the problem perhaps redesigning the page is a better solution. — glend, Apr 10 '15 at 12:36
@DaveNewton Your comment reminds me of https://xkcd.com/1172/ and https://xkcd.com/378/ . For this specific problem I am the main user of my site. Implementing a page search is MUCH more overhead than applying a tag / including some generic JS (if this is possible) — Martin Thoma, Apr 10 '15 at 15:07

Scott · Answer 1 · 2015-04-10T13:34:34.353

EDIT: Completely updated this to automatically insert CSS :before statements into a new stylesheet to make text completely unfindable. The only problem now is that the text is no longer selectable, either.

(function() {
  function fullPath(el) {
    // fullPath from http://stackoverflow.com/a/4588211/382456
    var names = [];
    while (el.parentNode) {
      if (el.id) {
        names.unshift('#' + el.id);
        break;
      } else {
        if (el == el.ownerDocument.documentElement) names.unshift(el.tagName);
        else {
          for (var c = 1, e = el; e.previousElementSibling; e = e.previousElementSibling, c++);
          names.unshift(el.tagName + ":nth-child(" + c + ")");
        }
        el = el.parentNode;
      }
    }
    return names.join(" > ");
  }

  function addCSSRule(sheet, selector, rules, index) {
    // addCSSRule from http://davidwalsh.name/add-rules-stylesheets
    if ("insertRule" in sheet) sheet.insertRule(selector + "{" + rules + "}", index);
    else if ("addRule" in sheet) sheet.addRule(selector, rules, index);
  }


  var nofinds = document.getElementsByClassName("no-find");
  [].forEach.call(nofinds, function(el) {
    var selector = fullPath(el);
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);

    var stylesheet = document.styleSheets[document.styleSheets.length - 1];
    var content = el.textContent;
    var fontSize = window.getComputedStyle(el)["font-size"];
    addCSSRule(stylesheet, selector + ":before", "font-size:" + fontSize + ";content: \"" + content + "\"");
    addCSSRule(stylesheet, selector, "font-size:0");
  });
})();

test1
<span class="no-find">test2</span>
test3 test4

As well, this implementation doesn't support any HTML tags within the span, since CSS's content has no way of doing that.

@putvande he said he "manly" cares about Chrome, but maybe he (womanly?) cares about Firefox as well — MasterScrat, Apr 10 '15 at 13:10
I'm trying some other things - attempting to make a Javascript plugin to automatically insert the text as `:before` content, but no luck yet. — Scott, Apr 10 '15 at 13:13

score 0 · Answer 2 · answered Apr 10 '15 at 13:04

At least on Firefox you can use the ::after selector to append text that won't be searchable (or selectable).

<!DOCTYPE html>
<html>
<head>
<style>
p::after { 
    content: " - Can't find me";
}
</style>
</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

From here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_after

score -1 · Answer 3 · answered Apr 10 '15 at 12:31

I doubt this is possible. You would have to change the behavior of the search field, which you certainly do not have access to.

A workaround might be implementing your own search box on your site which is able to exclude entries from the list (e.g. using a custom class or attribute on those elements).

score -1 · Answer 4 · edited May 23 '17 at 11:54

The first answer here is somewhat related: Is it possible to disable Ctrl + F of find in page?

Rather than disable the Find function, you could make it so that Find won't find the words! One way to do this would be to use the CSS content declaration to inject the words. Find won't find them:

You would have to account for every instance of the word/s and output the 'translated' word (as in, instead of 'myword', output '<div class="replaceword" data-replaceword="myword"></div>').

You could then use JavaScript to add the proper css to each instance of div.replaceword and add the appropriate CSS based on the data attribute.

Is it possible to mark text as non-searchable?

4 Answers4