How to extract an from a tag (with jQuery)?

Question

I'm playing around with some contenteditable div's and after a while I'm getting the following code:

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

Now I'd like to get valid HTML. So I have to extract the ul from the p or in other words close the p tag before the ul and open it again after the ul. Afterwards my code should like like this:

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

How can I achieve this (with jQuery)?

I already tried this (where elem is the jQuery element containing p):

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

This seems to work. But I'm not sure whether this is the best solution. Do you have a better idea?

Answer 1

You're looking for before / after.

DO NOT USE REGEX FOR THIS.

Regex is for specialized cases where you need to target a specific set of text for a purpose that most of the time can be avoided in jQuery / Javascript.

If you just do

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>

It should be noted that it is illegal to use a ul or a ol tag inside of a p tag. Because of this I changed the p to a div to demonstrate. Most browsers should not mess up if you use a p instead of a div with this code.

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

Answer 2

What's happening

The invalid HTML is parsed into a valid DOM by the browser, possibly adding closing tags where necessary. In Chrome I see:

<p>
  before
  <ul>
    <li>item></li>
  </ul>
  after
</p>

appear in the DOM inspector as

<p>
  before
</p>
<ul>
  <li>item></li>
</ul>
after
<p></p>

---

The solution

So, assuming you have the unparsed HTML somewhere in a string, you can use the following (modified) regexes for a tighter match. It might be overkill though.

var beginRegex = new RegExp(/<p>(((?!<\/p>).|[\r\n])*?)<ul>/gi);
var endRegex = new RegExp(/<\/ul>(((?!<p>).|[\r\n])*?)<\/p>/gi);

var content = ...;

$('#target')
    .html(content
        .replace(beginRegex, '<p>$1</p><ul>')
        .replace(endRegex, '</ul><p>$1</p>')
    );

JSFiddle

It matches only unclosed <p> tags before <ul> and likewise for afterwards. One thing you can take away without using the complicated regex is to use the i modifier for case insensitive, since HTML is case insensitive.

Answer 3

Thank to Shadowen I finally took his suggestion and modified it a little bit to get what I need. What I forgot to ask in my origin question - this should work for and also for lists. So this is the solution that works for me:

var content = '...';
var beginRegexUl = new RegExp(/<p>(((?!<\/p>).|[\r\n])*?)<ul>/gi);
var endRegexUl = new RegExp(/<\/ul>(((?!<p>).|[\r\n])*?)<\/p>/gi);
var beginRegexOl = new RegExp(/<p>(((?!<\/p>).|[\r\n])*?)<ol>/gi);
var endRegexOl = new RegExp(/<\/ol>(((?!<p>).|[\r\n])*?)<\/p>/gi);

$('#target')
  .html(content
    .replace(beginRegexUl, '<p>$1</p><ul>')
    .replace(endRegexUl, '</ul><p>$1</p>')
    .replace(beginRegexOl, '<p>$1</p><ol>')
    .replace(endRegexOl, '</ol><p>$1</p>'));

JSFiddle