HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.escapeSelector dynamic</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 420px; }
    input { width: 100%; padding: 8px; margin: 8px 0; box-sizing: border-box; }
    button { padding: 8px 14px; cursor: pointer; }
    .tag { display: inline-block; padding: 6px 10px; margin: 4px; background: #e2e8f0; border-radius: 4px; }
    .tag.match { background: #bbf7d0; outline: 2px solid #16a34a; }
    #built { font-family: monospace; font-size: 13px; color: #64748b; margin-top: 10px; }
  </style>
</head>
<body>
  <p>Tags on page: <span class="tag item.main">item.main</span> <span class="tag item">item</span> <span class="tag warn!">warn!</span></p>
  <label for="q">Find tag by exact class name:</label>
  <input id="q" type="text" value="item.main" placeholder="e.g. item.main">
  <button type="button" id="find">Find &amp; highlight</button>
  <p id="built"></p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#find").on("click", function() {
      var name = $("#q").val();
      var safe = "." + $.escapeSelector(name);
      $("#built").text("Built selector: " + safe);
      $(".tag").removeClass("match");
      $(safe).addClass("match");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.escapeSelector — dynamic safe selector (Try It)