Как сделать текст в кавычках красивым с помощью регулярного выражения javascript

#javascript #jquery #regex

#javascript #jquery #регулярное выражение

Вопрос:

Я хочу, чтобы строки текста с префиксом > были заключены в <span class="quoted"></span> .

Вот мой код:

 $(document).ready(function(){
    x = $('DIV#test').html();
    x = x.replace(/(^|n)amp;>([^n] )(n|$)/g, "$1<span class="quoted">$2</span>$3");
    $('DIV#test').html(x);
});
  

Я не могу найти причину, почему, но это приводит к тому, что в Chrome цитируются только нечетные строки, а в IE весь текст становится серым. Есть идеи, что не так с этим кодом?

Демонстрация в jsFiddle:http://jsfiddle.net/jBJ6V/1 /

Комментарии:

1. Хотя у меня нет решения.. Я могу указать на вашу проблему.. Кажется, регулярное выражение работает таким образом.. В первой строке он сканирует от » n>» до » n», затем в следующей строке он снова ищет » n>», Но ‘ n’ уже был использован при предыдущем сканировании.. Надеюсь, это поможет

Ответ №1:

Используйте m («многострочный») флаг в регулярном выражении, а не чередование в начале (и с необходимыми корректировками результирующих групп захвата):

 $(document).ready(function(){
    x = $('DIV#test').html();
    x = x.replace(/^amp;>([^n] )$/gm, "<span class="quoted">$1</span>");
    // Changes:    ^----here----^      ^--here                ^^--here-^
    $('DIV#test').html(x);
});
  

Обновленная скрипка

m Флаг указывает регулярному выражению обрабатывать ^ и $ как относящиеся к отдельным строкам, а не к строке в целом. Подробнее в разделах 15.10.2.6 и 15.10.2.7 спецификации, а также в MDC.

Комментарии:

1. Спасибо, что объяснили, где я был неправ. Это отлично работает во всех браузерах, кроме IE. В IE все содержимое <div> сохраняет оболочку в одном интервале — разрывы строк просто игнорируются (это работает в jsFiddle demo, но когда я получаю текст из базы данных MySQL — все время одно и то же). Есть идеи, как это исправить?

2. @SilverLight, IE7 и IE8 дают разные результаты для .html(), как описано здесь quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html

Ответ №2:

Причина, по которой это не работает в IE, заключается в том, что более старый IE обрабатывает innerHTML по-разному, и это отражается в jQuery, имеющем разные результаты .html().

Попробуйте этот jsfiddle:

http://jsfiddle.net/jBJ6V/8/

Я запустил его в режимах совместимости 7,8 и 9 и, похоже, работает.

Комментарии:

1. meta.stackexchange.com/questions/8231/…

2. Да, извините, я подумал, что он увидит флаг m и спросит себя, что это такое, и загуглит информацию для самостоятельного изучения 🙂