javascript - 删除标签名称和所有选择器，但不删除内容

Question

我有一个问题，我认为我会使用正则表达式来解决，但如果有其他方法可以解决它，我很想听听。

我的问题是我正在从网站上获取产品描述。现在要做到这一点，我使用类似:description= $('.description').html(); 。这会从网站获取我需要的所有内容，在本例中是百思买的命运 2。结果就是片段中的内容。

<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>

在显示结果之前，我需要删除所有标签和选择器并替换为 <p>除 <li> 之外的元素和<ul>元素，这样当我重新显示它们时它们不会干扰任何内容，但内容仍然存在并且位于新行上。所以在这种情况下<div id="synopsis">This is text inside</div>将等于 <p>This is text inside</p> 。

如果可能的话，我还想删除 <ul> 的所有属性和<li>标签，同时保留实际标签。

希望这是有道理的，我感谢任何人能给我的任何帮助，如果有我没有想到的其他解决方案，我很乐意听到。

Answer 1

这应该可以解决问题。您首先需要将其添加到 DOM 和 $('#synopsis').hide()，然后在处理后添加 $('#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
        });
    });

如果您无法将其添加到 DOM，则需要按照您的建议使用正则表达式。

// 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>');

编辑:在后面添加\s