uTools-Manuals/docs/jQuery/jQuery.htmlPrefilter.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>&lt;del&gt;</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">/&lt;(del)(?=[\s&gt;])[\w\W]*?&lt;\/\1\s*&gt;/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>&lt;a title="&lt;div /&gt;"&gt;&lt;&gt;</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">"&gt;]"</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=\"'/&gt;]+(?:"</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">"(&lt;)(?!"</span> + pvoidName + <span class="string">")("</span> + pname + <span class="string">")("</span> + pattrs + <span class="string">")(\\/)(&gt;)|"</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">"(&lt;(script|style|textarea)"</span> + pattrs + <span class="string">"&gt;"</span> + panything + <span class="string">"&lt;\\/\\7"</span> + pcloseTail + <span class="string">"&gt;|"</span> +</code></div></div><div class="container"><div class="line"><code>      <span class="string">"&lt;!--"</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">// "&lt;"; element name; attributes; "&gt;"; "&lt;"; "/"; element name; "&gt;"; 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>