代码之家 › 专栏 › 技术社区 › Varun Sharma

如何处理具有特殊字符的数据目标值?

twitter-bootstrap-3 css3 html jquery javascript

0

Varun Sharma · 技术社区 · 8 年前

我正在实现一个引导弹出窗口。我在数据目标中加入了一些具有特殊字符的值。这些值来自DB,这个弹出窗口通过循环实现。

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

3 回复 | 直到 8 年前

1

0

Nishant Ghodke 8 年前

必须对特殊字符进行转义,以便让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) +"

2

1

Salman Arshad 8 年前

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>

3

0

Rathod Narendar 8 年前

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