Question

我有时在网站上看到无法搜索的文字（例如，当我有一个很长的列表并且用户可以对每个元素应用某些操作时。他可能会搜索列表中的元素，但随后也会＆＃34;发现＆＃34;行动）。因此，当用户按 Ctrl + f 并输入相同的文本时，他不应该得到这些结果。

不使用图像可以吗？

（我非常关心最新的Google Chrome版本）

Answer 1

编辑：完全更新此选项可自动将CSS :before语句插入新样式表，使文本完全不可修改。现在唯一的问题是文本也不再可选。

(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

同样，此实现不支持span中的任何HTML标记，因为CSS的content无法执行此操作。

Answer 2

至少在Firefox上，您可以使用::after选择器附加无法搜索（或可选择）的文字。

<!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>

从这里开始：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_after

Answer 3

我怀疑这是可能的。您必须更改搜索字段的行为，您当然无权访问。

解决方法可能是在您的网站上实施您自己的搜索框，该搜索框能够从列表中排除条目（例如，使用这些元素上的自定义类或属性）。

Answer 4

这里的第一个答案有些相关： Is it possible to disable Ctrl + F of find in page?

不是禁用“查找”功能，而是可以使“查找”找不到单词！一种方法是使用CSS内容声明来注入单词。找不到它们：

你必须考虑单词/ s的每个实例并输出'翻译'单词（如，而不是'myword'，输出'<div class="replaceword" data-replaceword="myword"></div>'）。

然后，您可以使用JavaScript将正确的css添加到div.replaceword的每个实例中，并根据数据属性添加适当的CSS。

是否可以将文本标记为不可搜索？

4 个答案: