mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 15:04:05 +08:00
124 lines
12 KiB
HTML
124 lines
12 KiB
HTML
<article class="" id="post-">
|
||
<header class="entry-header">
|
||
<h1 class="entry-title">jQuery.htmlPrefilter()</h1>
|
||
<div class="entry-meta">
|
||
所属分类:<span class="category"><a href="/category/manipulation/">DOM 操作</a></span>
|
||
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/jQuery.htmlPrefilter/" target="_blank">jQuery.htmlPrefilter()</a></span>
|
||
</div><!-- .entry-meta -->
|
||
</header><!-- .entry-header -->
|
||
<article class="entry method" id="jQuery-htmlPrefilter1"><h2 class="section-title">
|
||
<span class="name">jQuery.htmlPrefilter( html )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#String">String</a></span>
|
||
</h2>
|
||
<div class="entry-wrapper">
|
||
<p class="desc"><strong>Description: </strong>Modify and filter HTML strings passed through <a href="/category/manipulation/">jQuery manipulation methods</a>.</p>
|
||
<ul class="signatures"><li class="signature">
|
||
<h4 class="name">
|
||
<span class="version-details">version added: <a href="/category/version/1.12/2.2/">1.12/2.2</a></span><a href="#jQuery-htmlPrefilter-html" id="jQuery-htmlPrefilter-html"><span class="icon-link"></span>jQuery.htmlPrefilter( html )</a>
|
||
</h4>
|
||
<ul><li>
|
||
<div><strong>html</strong></div>
|
||
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
|
||
</div>
|
||
<div>The HTML string on which to operate.</div>
|
||
</li></ul>
|
||
</li></ul>
|
||
<div class="longdesc" id="entry-longdesc">
|
||
<p>This method rarely needs to be called directly. Instead, use it as an entry point to modify existing <a href="/category/manipulation/">jQuery manipulation methods</a>. For instance, to remove all <code><del></code> tags from incoming HTML strings, do this:</p>
|
||
<div class="syntaxhighlighter javascript">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> htmlPrefilter = $.htmlPrefilter,</code></div></div><div class="container"><div class="line"><code> rdel = <span class="regexp">/<(del)(?=[\s>])[\w\W]*?<\/\1\s*>/gi</span>;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$.htmlPrefilter = <span class="keyword">function</span>( html ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> htmlPrefilter.call( <span class="keyword">this</span>, html ).replace( rdel, <span class="string">""</span> );</code></div></div><div class="container"><div class="line"><code>};</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>This function can also be overwritten in order to bypass certain edge case issues. The default <code>htmlPrefilter</code> function in jQuery will greedily ensure that all tags are XHTML-compliant. This includes anything that looks like an HTML tag, but is actually within a string (e.g. </p><pre><a title="<div />"><></pre>). The <code>jQuery.htmlPrefilter()</code> function can be used to bypass this:
|
||
<div class="syntaxhighlighter javascript">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$.htmlPrefilter = <span class="keyword">function</span>( html ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Return HTML strings unchanged</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> html;</code></div></div><div class="container"><div class="line"><code>};</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>However, while the above fix is short and simple, it puts the burden on you to ensure XHTML-compliant tags in any HTML strings. A more thorough fix for this issue would be this:</p>
|
||
<div class="syntaxhighlighter javascript">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
<div class="line n28">28</div>
|
||
<div class="line n29">29</div>
|
||
<div class="line n30">30</div>
|
||
<div class="line n31">31</div>
|
||
<div class="line n32">32</div>
|
||
<div class="line n33">33</div>
|
||
<div class="line n34">34</div>
|
||
<div class="line n35">35</div>
|
||
<div class="line n36">36</div>
|
||
<div class="line n37">37</div>
|
||
<div class="line n38">38</div>
|
||
<div class="line n39">39</div>
|
||
<div class="line n40">40</div>
|
||
<div class="line n41">41</div>
|
||
<div class="line n42">42</div>
|
||
<div class="line n43">43</div>
|
||
<div class="line n44">44</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> panything = <span class="string">"[\\w\\W]*?"</span>,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Whitespace</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// https://html.spec.whatwg.org/multipage/infrastructure.html#space-character</span></code></div></div><div class="container"><div class="line"><code> pspace = <span class="string">"[\\x20\\t\\r\\n\\f]"</span>,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// End of tag name (whitespace or greater-than)</span></code></div></div><div class="container"><div class="line"><code> pnameEnd = pspace.replace( <span class="string">"]"</span>, <span class="string">">]"</span> ),</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Tag name (a leading letter, then almost anything)</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// https://html.spec.whatwg.org/multipage/syntax.html#tag-open-state</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// https://html.spec.whatwg.org/multipage/syntax.html#tag-name-state</span></code></div></div><div class="container"><div class="line"><code> pname = <span class="string">"[a-z]"</span> + pnameEnd.replace( <span class="string">"["</span>, <span class="string">"[^/\\0"</span> ) + <span class="string">"*"</span>,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Void element (end tag prohibited)</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// https://html.spec.whatwg.org/multipage/syntax.html#void-elements</span></code></div></div><div class="container"><div class="line"><code> pvoidName = <span class="string">"(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|"</span> +</code></div></div><div class="container"><div class="line"><code> <span class="string">"source|track|wbr)(?="</span> + pnameEnd + <span class="string">")"</span>,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Attributes (double-quoted value, single-quoted value, unquoted value, or no value)</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2</span></code></div></div><div class="container"><div class="line"><code> pattrs = <span class="string">"(?:"</span> + pspace + <span class="string">"+[^\\0-\\x20\\x7f-\\x9f=\"'/>]+(?:"</span> + pspace + <span class="string">"*="</span> + pspace +</code></div></div><div class="container"><div class="line"><code> <span class="string">"*(?:\""</span> + panything + <span class="string">"\"|'"</span> + panything + <span class="string">"'|"</span> +</code></div></div><div class="container"><div class="line"><code> pnameEnd.replace( <span class="string">"["</span>, <span class="string">"[^"</span> ) + <span class="string">"*(?!/)"</span> +</code></div></div><div class="container"><div class="line"><code> <span class="string">")|))*"</span> + pspace + <span class="string">"*"</span>,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Trailing content of a close tag</span></code></div></div><div class="container"><div class="line"><code> pcloseTail = <span class="string">"(?:"</span> + pspace + panything + <span class="string">"|)"</span>,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> rspecialHtml = <span class="keyword">new</span> RegExp(</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Non-void element that self-closes: $1–$5</span></code></div></div><div class="container"><div class="line"><code> <span class="string">"(<)(?!"</span> + pvoidName + <span class="string">")("</span> + pname + <span class="string">")("</span> + pattrs + <span class="string">")(\\/)(>)|"</span> +</code></div></div><div class="container"><div class="line"><code> <span class="comment">// No-innerHTML container (element, comment, or CDATA): $6</span></code></div></div><div class="container"><div class="line"><code> <span class="string">"(<(script|style|textarea)"</span> + pattrs + <span class="string">">"</span> + panything + <span class="string">"<\\/\\7"</span> + pcloseTail + <span class="string">">|"</span> +</code></div></div><div class="container"><div class="line"><code> <span class="string">"<!--"</span> + panything + <span class="string">"--)"</span>,</code></div></div><div class="container"><div class="line"><code> <span class="string">"gi"</span></code></div></div><div class="container"><div class="line"><code> ),</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// "<"; element name; attributes; ">"; "<"; "/"; element name; ">"; no-innerHTML container</span></code></div></div><div class="container"><div class="line"><code> pspecialReplacement = <span class="string">"$1$2$3$5$1$4$2$5$6"</span>;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$.htmlPrefilter = <span class="keyword">function</span>( html ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> ( html + <span class="string">""</span> ).replace( rspecialHtml, pspecialReplacement );</code></div></div><div class="container"><div class="line"><code>};</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div></article>
|
||
</article> |