Как удалить пустые теги <p>из строки, используя JavaScript или Cheerio?

Question

У меня есть HTML в виде строки

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

Как мне убрать пустые теги p из этой строки, используя Cheerio или JS.

Я пытался искать в Stack Overflow и в Google в целом без четкого рабочего решения.

РЕДАКТИРОВАТЬ: Извинения, я только что заметил, что моя строка имеет довольно много пробелов между тегами:

Вот пример, который появляется, когда я использую console.log в моем приложении :

<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

Надеюсь, я вам помог

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 2

Вы можете использовать .replace("<p></p>", ""), если у тегов нет атрибутов, но если они есть, есть другой способ (кроме использования регулярных выражений для перехвата и замены тегов).

Хороший способ сделать что-то будет использовать собственные функции DOM.

Для удаления пустого тега можно использовать следующий селектор.

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

В вашем случае может быть что-то вроде этого

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

Но учтите, что :empty не будет работать с такими пробелами, как этот <p> </p> Также обратите внимание, что :empty удалит самозакрывающиеся теги

Answer 3

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}`);
      });

Попробуйте

Answer 4

Вы можете использовать метод replace:

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

console.log(stripped);

Answer 5

Вы можете попробовать это:

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 6

Вы можете просто заменить строку "<p></p>" на пустую строку ""

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