怎么去掉空的<p>使用 JavaScript 或 Cheerio 的字符串中的标签？

Question

I have some HTML as a string

"<p>This is a slightly longer post about something. Let's see how long this lasts. Okay so this is one paragraph now. </p><p>​</p><p>Let's write another paragraph, and see how it renders when I read this post later. </p><p>​</p><p>This is another short paragraph</p>"

How do I strip the empty p tags from this string using Cheerio or JS.

I've tried searching on Stack Overflow and Google in general without a clear working solution.

EDIT: Apologies, I have just noticed that my string has quite a lot of white space between the tags:

Here's an example one that comes up when I use console.log in my app:

<p>This is a slightly longer post about something. Let's see how long this lasts. Okay so this is one paragraph now. </p>
<p>​</p>
<p>Let's write another paragraph, and see how it renders when I read this post later. </p>
<p>​</p>
<p>Let's write another paragraph, and see how it renders when I read this post later. </p>

Answer 1

You can use .replace("<p></p>", "") if the tags don't have any attributes but if they do there is another way (aside from using regex to catch and replace tags).

A good way of doing things would be using native DOM functions.

To remove empty tag it is possible to use the following selector.

document.querySelectorAll("*:empty").forEach((x)=>{x.remove()});

In Your case maybe something like this

var div = document.createElement("div");
div.innerHTML = "<p>hello there</p><p class='empty'></p><p>Not empty</p><p></p>"//your variable containing HTML here;
div.querySelectorAll("*:empty").forEach((x)=>{x.remove()})
// Output: div.innerHTML == <p>hello there</p><p>Not empty</p>
//Then use remaining innerHTML as you wish

But note that :empty will not work with whitespace like this <p> </p> Also note that :empty will remove self closing tags

Answer 2

In your code in the empty <p> tags you have \​ (Zero width space) characters. This character stay invisible but is there

You can use split() and join('') methods

 var test = "<p>This is a slightly longer post about something. Let's see how long this lasts. Okay so this is one paragraph now. </p><p>​</p><p>Let's write another paragraph, and see how it renders when I read this post later. </p><p>​</p><p>This is another short paragraph</p>"; var str = test.split('<p>​</p>').join(''); console.log(str);

Or you can use replace() method

 var test = "<p>This is a slightly longer post about something. Let's see how long this lasts. Okay so this is one paragraph now. </p><p>​</p><p>Let's write another paragraph, and see how it renders when I read this post later. </p><p>​</p><p>This is another short paragraph</p>"; var str = test.replace(/<p>​<\\/p>/gi, ''); console.log(str);

Answer 3

You can just replace string "<p></p>" to empty string ""

 var str = "<p>This is a slightly longer post about something. Let's see how long this lasts. Okay so this is one paragraph now. </p><p></p><p>Let's write another paragraph, and see how it renders when I read this post later. </p><p></p><p>This is another short paragraph</p>"; str = str.replace(/<p>\\s*<\\/p>/ig, ''); str = str.replace(/<p\\s*\\/>/ig, ''); console.log(str);

Answer 4

You can try this:

 let str = "<p>This is a slightly longer post about something. Let's see how long this lasts. Okay so this is one paragraph now. </p><p></p><p>Let's write another paragraph, and see how it renders when I read this post later. </p><p></p><p>This is another short paragraph</p>"; // If your <p> element has attribtues then also it will be replaced. str = str.replace(/<p(\\s+[a-z0-9\\-_\\'\\"=]+)*><\\/p>/ig, ''); console.log(str);

 .as-console-wrapper {min-height: 100%!important; top: 0;}

Answer 5

You could use the replace method:

str = "<p>This is some HTML code</p>";
stripped = str.replace("<p>", "").replace("<\/p>", "");

console.log(stripped);

Answer 6

const regex = /<[^>]*>\s*<\/[^>]*>/;
const str = `<p>This is a slightly longer post about something. Let's see how long this lasts. Okay so this is one paragraph now</p><p></p><p>Let's write another paragraph, and see how it renders when I read this post later. </p><p></p><p>This is another short paragraph</p>`;
let m;

 if ((m = regex.exec(str)) !== null) {
   // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
       console.log(`Found match, group ${groupIndex}: ${match}`);
      });

Try This