Как я могу переписать HTML, заменив родительский тег, который совпадает с дочерним тегом? - PullRequest
Новая
       17

Как я могу переписать HTML, заменив родительский тег, который совпадает с дочерним тегом?

1 голос
/ 27 июня 2019

Я читаю из API кучу html-контента 

[
    {
        id: 1,
        content: '{html...}'
    },
    {
        id: 2,
        content: '{html...}'
    }
]

После получения этих данных я делаю некоторые замены, используя sanitize-html .Но теперь мне нужно проделать дополнительную работу.

Иногда я получаю это 

<p>some text...<p>
<p>
    <p>some text...<p>
    <p>
        <img />
        <span>some text</span>
    <p>
<p>

или это 

<p>some text...<p>
<p>some text...<p>
<p>
    <img />
    <span>some text</span>
<p>

То, что я притворяюсь, это сохранить мои параграфына одном уровне, поэтому я подумал использовать cheerio (который использует ядро ​​jQuery), делая что-то вроде 

const cheerio = require('cheerio');
const $ = cheerio.load(content);
content = $('p:not(:has(>p))').html();

Но это принесет только первый p и только при его наличии.И если я получу остальные вручную, я могу потерять правильный порядок содержимого.

Итак, есть ли хороший способ очистить HTML, сохраняя только один уровень p в соответствии с моим примером?

1 Ответ

1 голос
/ 27 июня 2019

Ваш HTML неверен.

  • Элемент p не может содержать элемент p
  • Конечный тег для p является необязательным
  • Попытка поставить pвнутри другого p неявно закроет первые p
  • Дополнительные конечные теги будут игнорироваться

Эта программа: 

const content = `

<p>some text...<p>
<p>
    <p>some text...<p>
    <p>
        <img />
        <span>some text</span>
    <p>
<p>


`;

const cheerio = require('cheerio');
const $ = cheerio.load(content);
console.log($.html());

выведет это: 

<html><head></head><body><p>some text...</p><p>
</p><p>
    </p><p>some text...</p><p>
    </p><p>
        <img>
        <span>some text</span>
    </p><p>
</p><p>


</p></body></html>

Так что просто вызов $.html() сгладит вложение абзаца.

...