labs-html-filtering/index.html at master · gigglebox/labs-html-filtering · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML Tag attribute parser</title>

  <link rel="stylesheet" href="forkme-ribbon.css">
  <style type="text/css">
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    html, body {
      font-family: sans-serif;
    }
    body {
      overflow: scroll;
      margin: 0;
      padding: 1rem;
    }
    blockquote {
      padding: 0.5rem 1rem;
      margin: 0;
      border-left: 8px solid #e3e3e3;
    }
    .container {
      position: relative;
      margin: 0 auto;
      max-width: 45rem;
    }
    .copyright {
      font-size: 0.8rem;
      text-align: center;
      color: #aaa;
      margin: 2rem 0;
    }
    #content-container {
      display: block;
      max-width: 100%;
      width: 100%;
      font-family: monospace;
    }
    .testing pre {
      display: block;
      overflow-x: auto;
      width: 100%;
      border: 1px solid #ccc;
    }
    .testing pre code {
      display: block;
    }
    .demo {
      display: block;
      overflow-x: auto;
      width: 100%;
      border: 1px solid #ccc;
    }
    .demo-text span {
      font-size: 60%;
      font-weight: normal;
      color: #aaa;
    }
  </style>
</head>
<body>

  <div class="github-fork-ribbon-wrapper right">
    <div class="github-fork-ribbon">
      <a href="https://github.com/giggleboxstudios/labs-html-filtering">Fork me on GitHub</a>
    </div>
  </div>

  <div class="container">
    <h1>Simple user submitted markup filter</h1>

    <blockquote>NOTE: Use responsibly! This only normalizes certain features of the markup submitted by the client prior to being passed to a server side layer. Always exercise caution when passing user submitted content to your server.</blockquote>

    <h2>User Submitted Markup</h2>
    <textarea name="" id="content-container" cols="100" rows="10" data-container="input">
<a href='https://testing.com/im-a-proper-url' title="i'm a sassy hamster that i'm starting to miss...">Testing</a>
<span id='waht-a-eadl' mz-data="what's the deal with pancakes?">There's a snake in my boot!</span>
<div class="waht-a-eadl" mz-data="what's the deal with pancakes?">There's a "snake in my" boot!</div>
    </textarea>

    <button class="b" data-trigger="filter-input">Filter Content</button>

    <div class="testing">
      <h2>Filtered Markup</h2>
      <pre><code data-container="output"></code></pre>
      <h2 class="demo-text">Demo <span data-trigger="update-time"></span></h2>
      <div class="demo" data-container="demo"></div>
    </div>

    <div class="copyright">Copyright &copy; 2014 &ndash; GiggleboxStudios, <a href="https://github.com/giggleboxstudios/labs-html-filtering/blob/master/license">MIT</a></div>

  </div>


  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    /* jshint laxbreak:true, laxcomma:true */
    /* global jQuery */

    (function($) {
      var content   = $('[data-container="input"]').val()
        , output    = $('[data-container="output"]')
        , demo      = $('[data-container="demo"]')
        , timeStamp = $('[data-trigger="update-time"]')

        , regex = {
            it:   /(<[\S\s]+?>)/gi            // gets contents inside of <tag> elements
          , dq:   /("[\S\s]+?")/gi            // gets contents inside of double quotes
          , rsq:  /'/g                        // gets all single quotes
          , punctuation: /([\?\+\$\%\:])/gi   // gets any punctuation that's used in regexp's
          }
        ;

      /**
       * Parses tag attribute contents "within double quotes" and escapes certain values with their HTML entity equivalent
       * @param  string   argContent  HTML content submitted by user to be persisted in DB
       * @return string               The filtered contents with escaped <tag> attributes
       */
      function parseDoubleQuotes(argContent) {

        var tempContent = argContent;

        // inside each <tag> in user submitted content
        $.each(tempContent.match(regex.it), function(itIndex, itValue) {

          // if the tag contains quoted attributes
          if (itValue.match(regex.dq)) {
            $.each(itValue.match(regex.dq), function(dqIndex, dqValue) {

              var dqFixed = dqValue
                .replace(/'/g, "&#8217;")    // replace single quotes with HTML entitiy equivalent
                // theoretically add any further escaping here...
                ;

              // escape punctuation that conflicts with regex modifiers
              dqValue = dqValue.replace(regex.punctuation, '\\$1');

              // replace this instance of the tags contents with the filtered version
              tempContent = tempContent.replace(new RegExp(dqValue, 'gi'), dqFixed);
            });
          }
        });

        return tempContent;
      }


      /**
       * Parses <tag>s that have attribute values wrapped with 'single quotes' and turns them to "double quotes"
       * @param  string   argContent  HTML content submitted by user to be persisted in DB
       * @return string               The filtered contents with <tag> attribute values wrapped in "double quotes"
       */
      function parseSingleQuotes(argContent) {

        var tempContent = argContent;

        // inside each <tag> in user submitted content
        $.each(tempContent.match(regex.it), function(itIndex, itValue) {

          // replace all instances of unescaped single quotes inside of <tag> declarations
          var itFixed = itValue
            .replace(/'/g, '"')   // eg: single quoted <tag> attributes='non-sense'...
            ;

          // escape punctuation that conflicts with regex modifiers
          itValue = itValue.replace(regex.punctuation, '\\$1');

          tempContent = tempContent.replace(new RegExp(itValue, 'gi'), itFixed);
        });

        return tempContent;
      }


      // Init the content filter
      filterContents(content);


      // dummy event that triggers on the field input button
      $('[data-trigger="filter-input"]').on('click', function() {
        content = $('[data-container="input"]').val()
        filterContents(content);
      });


      function HTMLdecode(argContent) {
        return String(argContent)
          .replace(/&/g, '&amp;')
          .replace(/"/g, '&quot;')
          .replace(/'/g, '&#39;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          ;
      }


      function logit(argContent) {
        output.html(HTMLdecode(argContent));
        demo.html(argContent);
      }


      function filterContents(argContent) {
        var start = Date.now();

        argContent = parseDoubleQuotes(argContent);
        argContent = parseSingleQuotes(argContent);

        logit(argContent);

        var delta = (Date.now() - start)/1000;
        timeStamp.text(delta + ' seconds');
      }

    })(jQuery);
  </script>
</body>
</html>