javascript - jquery find 找不到 "b"html 元素

Question

所以我在复制和粘贴时从 Google 文档中抓取 HTML，将其转换为我的网站编辑器的 BBCode。

它很乱(我显然无法控制 Google Docs 的呈现方式)，但粘贴一些简单的东西会喜欢(这是来自 Google Doc 的 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>是顶级 parent 。所以，jqTxt实际上是b的集合和两个meta元素。

所以，自 find()只查看当前所选项目的后代，b没有找到。任何后代b元素会很好地找到，但你没有。

一个简单的解决方案是在解析之前用一些虚拟标签包装您的输入文本:

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

示例(无粘贴代码):https://jsfiddle.net/rka9em0p/