HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.escapeSelector .box class</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    .highlight { background: #fef08a; outline: 2px solid #ca8a04; }
    .box { padding: 8px; margin: 6px 0; border: 1px dashed #94a3b8; }
    .literal-dot-box { padding: 8px; margin: 6px 0; border: 2px solid #7c3aed; background: #ede9fe; }
  </style>
</head>
<body>
  <div class="box">Normal class "box"</div>
  <div class=".box literal-dot-box">Literal class ".box"</div>
  <div class="box">Another normal "box"</div>
  <button type="button" id="run">Highlight literal .box only</button>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#run").on("click", function() {
      $("div").removeClass("highlight");
      $("." + $.escapeSelector(".box")).addClass("highlight");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.escapeSelector('.box') — find literal class (Try It)