Как я могу убедиться, что избыточные теги <p>не нарушают стиль? - PullRequest
Новая
       5

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

3 голосов
/ 12 июня 2011

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

This is a value with no second line

или 

<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 / etc не доступны для меня (это облегчит мне задачу!)

Ответы [ 5 ]

4 голосов
/ 12 июня 2011

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

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

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

2 голосов
/ 12 июня 2011

Сначала сравните: 

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

Вместо простого добавления тегов.

1 голос
/ 12 июня 2011

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

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

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

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

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

0 голосов
/ 12 июня 2011

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

0 голосов
/ 12 июня 2011

Предполагая 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>
...