如何处理带有特殊字符的数据目标值？答案

【问题标题】：How to handle data-target value with special characters?如何处理带有特殊字符的数据目标值？
【发布时间】：2018-10-10 10:52:23
【问题描述】：

我正在实施一个引导弹出窗口。我在数据目标中使用特殊字符赋予了一些价值。这些值来自 DB，此弹出窗口通过循环实现。

我尝试过使用 w3school。如何打开带有特殊字符的弹出窗口。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my(Modal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="my(Modal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

如果删除 ( 那么它将起作用。但这些 id 不是我的手，这些 id 来自 API。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

您需要“转义”选择器中的特殊字符。这个：

data-target="#my(Modal"

应该是：

data-target="#my\(Modal"

或者：

data-target="#my\000028Modal"

您的示例代码仅添加了一个 \：

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my\(Modal">Open Modal</button>
  <!-- Modal -->
  <div class="modal fade" id="my(Modal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的回答。我有一个疑问，如果会出现多个括号或逗号，那么它应该可以工作吗？
参见mathiasbynens.be/notes/css-escapes - 基本上是任何在 CSS 中具有特殊含义的字符，例如,~+:; 必须转义。 my(Modal).foo.bar 之类的 id 将变为 my\(Modal\)\.foo\.bar

【解决方案2】：

您必须对特殊字符进行转义，以便让 jQuery 知道您想按原样使用该字符，并且不应将其视为语法错误。

function escapeString(str) {
    return (str + '').replace(/[\\"')(]/g, '\\$&').replace(/\u0000/g, '\\0')
}
// Add special characters here       ^ -- after \\
// This allows single, and double quotes, 
// opening, and closing parentheses.

用上面的函数包装你的目标值：

data-target="+ escapeString(targetValue) +"

【讨论】：

【解决方案3】：

<div ng-repeat="rule in ruleDetails">
  <div>{{rule.name}} <i data-toggle="modal" data-target="#{{ rule.name }}"></i>
  </div>
  <div class="modal fade" id="{{ rule.name }}" tabindex="-1" role="dialog"></div> 
</div>

I have special characters in rule.name for example: 'as-copy(1) from test data' 
which is bounded with id attribute of bootstrap modal. By this UI modal or popup 
is not opening and displayed rule name. Please help how to trim or escape 
special characters here?

【讨论】：