Как я могу убедиться, что избыточные теги ‹p› не нарушают стиль?

Я получаю ненадежный результат от Tumblr API. Когда я получаю одну строку текста, я получаю только текст. При наличии нескольких строк каждая строка заключена в тег <p>. Итак, я либо получаю:

This is a value with no second line

or

<p>This is a value</p>
<p>with a second line</p>

Я хочу, чтобы оба выглядели одинаково. Я вручную добавлял <p> вокруг значения, но это приведет к:

<p><p>This is a value</p>
<p>with a second line</p></p>

на многострочные значения.

У меня есть несколько мыслей о том, как это исправить, но я не уверен, что будет лучше.

  1. Создайте новый стиль CSS p p {}, чтобы компенсировать испорченный стиль.
  2. Используйте jQuery, чтобы взять DOM-содержимое избыточных тегов <p> и сделать их неизбыточными.
  3. Просто загрузите текст в функцию jQuery, посмотрите, есть ли теги <p>, добавьте их, если нет, затем запишите результат в DOM.

Я не уверен, что вариант 1 будет работать очень хорошо (особенно в браузерах), и он кажется немного хакерским. Любые идеи о том, лучше ли вариант 2 или 3, и как я буду реализовывать?

Изменить: нужно было упомянуть, что я играю с темой Tumblr, поэтому Python/PHP/ASP/и т. д. мне недоступны (это облегчило бы мне задачу!).


jquery css tumblr
person Zac    schedule 11.06.2011    source источник
comment
@Zac Просто найдите последовательность "<p>" внутри строки. Если его там нет, оберните строку тегами "<p>".   -  person Šime Vidas    schedule 12.06.2011
comment
@Michael Вы бы обернули строку в теги P только, если в сообщении нет "<p>" последовательности. Если сообщение многострочное, в сообщении будет как минимум две последовательности "<p>", поэтому вы не будете оборачивать строку в теги P....   -  person Šime Vidas    schedule 12.06.2011
comment
@Sime - свет был показан, и я отказываюсь от своего комментария. Ваше здоровье!   -  person Michael Jasper    schedule 12.06.2011
comment
Не выбирайте вариант 1, так как у вас будет недопустимый HTML.   -  person melhosseiny    schedule 12.06.2011
comment
@melhosseiny - согласен. Но HTML в любом случае будет недействительным, если он использует jquery в качестве исправления. Отключите javascript, у вас все та же проблема;)   -  person daryl    schedule 12.06.2011
comment
@tfbox OP упомянул Tumblr API, что означает, что здесь задействован программный интерфейс. Сообщение извлекается с помощью Ajax (скорее всего). Следовательно, без JavaScript не было бы сообщения...   -  person Šime Vidas    schedule 12.06.2011

Ответы (5)


arrow_upward
2
arrow_downward

Сначала сопоставьте:

result = /^\s*\<p\>.+\<\/p\>$/.test(result) ? result : '<p>' + result + '</p>';

Вместо того, чтобы просто добавлять теги все время.

person Ry-♦    schedule 11.06.2011
comment
Пытался отредактировать ответ, чтобы избежать неэкранированной косой черты в регулярном выражении, но SO не принимает изменения только одного символа. Регулярное выражение должно читаться как /^\s*<p>.+<\/p>$/, так как ни ‹, ни › не требуют спуска. - person Rob Raisch; 12.06.2011

arrow_upward
4
arrow_downward

Почему бы просто не

if ( str.indexOf('<p>') === -1 ) {
   str = '<p>' + str + '</p>';    
}

Итак, если внутри вашей строки нет ни одного вхождения строки "<p>", это означает, что результат «однострочный», и вам нужно обернуть его в теги "<p>".

person Šime Vidas    schedule 11.06.2011

arrow_upward
1
arrow_downward

Из ваших вариантов я думаю, что вариант 3 - лучший путь. Однако у меня есть еще одна идея, которая может быть полезной:

Я не уверен, на какой платформе вы разрабатываете (php/asp.net/etc..), и вы, вероятно, могли бы сделать это и во внешнем интерфейсе.

  1. получить сообщение (1 или более строк)
  2. используйте функцию split вашей платформы, чтобы разделить строку на массив на основе поиска символа новой строки
  3. перебрать значения массива и удалить все <p>, если они есть
  4. повторите итерацию и добавьте и добавьте <p> </p> к каждому индексу массива
  5. обрезать каждую строку массива в одну строку и вывести в дом

Виола! Будь то 1 строка или 10 строк, без <p> или 10 <p>, вы можете положиться на функциональность.

Этот метод обеспечит «защиту от будущего» этого сегмента вашего приложения, потому что, как мы все видели, иногда компании быстро и без предупреждения меняют возвращаемый результат API или изменяют способ работы API.

person Michael Jasper    schedule 11.06.2011

arrow_upward
0
arrow_downward

Предполагая PHP; и если формат строки соответствует ~

$str = 'hello world';
//$str = '<p>a string with a p tag</p>';

if(substr($str,0,3)=='<p>') {

    echo $str;

} else {

    echo '<p> ' . $str . '</p>';

}

// <p>hello world</p>
// <p>a string with a p tag</p>
person Ross    schedule 11.06.2011

arrow_upward
0
arrow_downward

Другим решением может быть замена всех /<\/p>[^<]*<p>/g на <br/>, что сохранит разрывы строк в многострочных абзацах.

person Rob Raisch    schedule 11.06.2011