CODEWITHSUNDEEP
javascriptjqueryhtmlregexparsing
Dtrav
Dtrav

Reputation: 417

Removing tag name and all selectors but not content

I have a question that I assume I would use regex for but if there's another way around it, I would love to hear it.

My problem is I'm grabbing descriptions of products off of websites. Now to do this I'm using something like: description= $('.description').html();. This gets all the content I need from the website which in this case, is Best Buy's Destiny 2. The result is what's in the snippet. 

<div id="synopsis">From the makers of the acclaimed hit game Destiny, comes the much-anticipated sequel. An action shooter that takes you on an epic journey across the solar system.<br><br>Humanity’s last safe city has fallen to an overwhelming invasion force, led by Ghaul, the imposing commander of the brutal Red Legion. He has stripped the city’s Guardians of their power, and forced the survivors to flee. You will venture to mysterious, unexplored worlds of our solar system to discover an arsenal of weapons and devastating new combat abilities. To defeat the Red Legion and confront Ghaul, you must reunite humanity’s scattered heroes, stand together, and fight back to reclaim our home.</div>
<div id="features"><div class="icon-feature-list"></div><div class="feature"><span class="type-paragraph-title">Includes: Destiny 2 Base Game</span><p></p></div><div class="feature"><span class="type-paragraph-title">Gameplay Features:</span><p>- Rich cinematic story campaign.</p></div><div class="feature"><p>- Multiple cooperative game modes for epic, social fun.</p></div><div class="feature"><p>- Intense 4v4 competitive multiplayer matches, including 5 different PVP modes.</p></div><div class="feature"><p>- Expansive, never-before-seen worlds and spaces to explore.</p></div><div class="feature"><p>- Customize your character’s weapons and armor with an all-new array of gear.</p></div><div class="feature"><p>- Discover Lost Sectors, complete new Adventure missions, or rally to Public Events with other Guardians.</p></div><div class="feature"><p>- Introducing a brand new Guided Games system that helps players find like-minded groups to experience Destiny 2’s most challenging activities, like the Raid.</p></div></div>

Before I display the result, I need all the tags and selectors ripped out and replaced with a <p> element except for <li> and <ul> elements so they don't interfere with anything when I redisplay them but the content is still there and is on a new line. So in this case <div id="synopsis">This is text inside</div> will equal <p>This is text inside</p>.

If possible, I would also like to remove all attributes to <ul> and <li> tags while keep the keeping the actual tag as well.

Hopefully this makes sense, I appreciate any help anyone can give me and if there's another solution that I'm not thinking of, I would love to hear it.

Upvotes: 0

Views: 199

Answers (1)

Adam Love
Adam Love

Reputation: 656

This should do the trick. You would first need to add it to the DOM and $('#synopsis').hide(), then after processing, $('#synopsis').show().

    // Remove classes and IDs 
    $('#synopsis').find('*').removeAttr('class').removeAttr('id');

   // Convert all tags to <p> tags except UL, LI
    $('#synopsis').find('*').not('ul, li').replaceWith(function() {
        return $('<p/>', {
            html: this.innerHTML
        });
    });

If you cannot add it to the DOM, you will need regex as you suggested. 

// Convert all tag beginnings (e.g. <div) except ul, li to p
str.replace(/<(?!ul|li\b)\b\w+/g  , '<p');

// convert all tag endings (e.g. /div>) except ul, li to p
str.replace(/\/((?!ul|li)\w+)>/g , '/p>');

// Remove all classes, ids etc from resulting <p> tags
str.replace(/<p\s[^>]+>/g , '<p>');

Edit: added \s after the

Upvotes: 1

Related Questions