javascript - 如何从 <p> 标签中提取 <ul> (使用 jQuery)？

Question

我正在尝试一些 contenteditable div，过了一会儿我得到了以下代码:

<p>
some text
<ul>
  <li>A</li>
  <li>2</li>
</ul>
another text
</p>

现在我想获取有效的 HTML。因此，我必须从 p 中提取 ul，或者换句话说，在 ul 之前关闭 p 标记，并且在 ul 之后再次打开它。之后我的代码应该像这样:

<p>some text</p>
<ul>
  <li>A</li>
  <li>2</li>
</ul>
<p>another text</p>

我怎样才能实现这个(使用 jQuery)？

我已经尝试过这个(其中 elem 是包含 p 的 jQuery 元素):

var reg1 = new RegExp('<ul>', 'g');
var reg2 = new RegExp('</ul>', 'g')
elem.html(elem.html().replace(reg1, '</p><ul>').replace(reg2, '</ul><p>'));

这似乎有效。但我不确定这是否是最好的解决方案。 你有更好的主意吗？

Answer 1

您正在寻找before/after .

请勿为此使用正则表达式。

正则表达式适用于特殊情况，在这种情况下，您需要针对一组特定的文本来实现大多数时候可以在 jQuery/Javascript 中避免的目的。

如果你这样做

var ul = $('p').find('ul');
ul.closest('p').before(ul);

<小时/>

$(document).on('ready', function(){
  
    var ul = $('div').find('ul');

    ul.closest('div').addClass('red').before(ul);
});

.red{
  color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <span>some text</span>
  <ul>
    <li>List</li>
  </ul>
  <span>and more text</span>
</div>

需要注意的是，在 p 标签内使用 ul 或 ol 标签是非法的。因此，我将 p 更改为 div 来演示。如果您在此代码中使用 p 而不是 div，大多数浏览器都不会出现问题。

参见Should ol/ul be inside <p> or outside?