jquery findは "b" html要素を見つけられません

Question

Google DocsからHTMLをコピーして貼り付けて、サイトエディタのBBCodeに変換しています。

それは（Googleドキュメントは明らかにレンダリングする方法を私がコントロールしていない）厄介だが、似たいシンプルなものを貼り付ける（これはGoogleドキュメントからテキストの3行です）：

<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<meta charset="utf-8"> 
<b style="font-weight:normal;" id="docs-internal-guid-7304b159-0210-bb69-2db2-b4cc8d9a2d67"> 
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Test File</span></p><br> 
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">This is a test</span></p><br> 
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><a href="https://www.test.com" style="text-decoration:none;"><span style="font-size:11pt;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">Test link</span></a></p> 
</b><br class="Apple-interchange-newline"> 

実際のJSコード私はそれを行うには、今があります。

$('textarea').on('paste',function(e) 
{ 
    e.preventDefault(); 
    var text = (e.originalEvent || e).clipboardData.getData('text/html') || prompt('Paste something..'); 

    console.log(text); 

    var jqTxt = jQuery(text); 

    jqTxt.find("a").each(function(item, el) 
    { 
     $(el).replaceWith("[url=" + el.href + "]" + el.textContent + "[/url]"); 
    }); 

    jqTxt.find("br").each(function(item, el) 
    { 
     $(el).replaceWith("\n"); 
    }); 

    jqTxt.find("b").each(function(item, el) 
    { 
     $(el).replaceWith("[b]" + el.textContent + "[/b]"); 
    }); 

    jqTxt.find("p").each(function(item, el) 
    { 
     $(el).replaceWith(el.textContent+"\r\n"); 
    }); 

    window.document.execCommand('insertText', false, jqTxt.text()); 
}); 

それは、リンク、BRおよびPタグのためではなく、Bタグのために働くと私はなぜわかりません。

このメソッドは私が望むものを置き換え、残りの部分は通常のテキストに戻します。

Answer 1

jQuery()でhtmlを解析すると、実際に上位の親アイテムが返されます。

この場合、<b>はトップレベルの親です。したがって、jqTxtは実際にはbと2つのmeta要素のコレクションです。

find()は、現在選択されているアイテムの子孫しか見ないため、bは見つかりませんでした。子孫bの要素はきちんと見つかるでしょうが、あなたは何も持っていません。

これに対する簡単な解決策は、解析する前に、いくつかのダミーのタグを使用して入力テキストをラップするために、次のようになります（ペーストコードなし）

text = "<div>" + text + "</div>"; 

例：https://jsfiddle.net/rka9em0p/