получить строку между двумя строками с помощью jquery

Если у меня есть этот HTML

<div class="comment-body">
[img]http://topnews.net.nz/images/YouTube-3.jpg[/img] random text here
</div>

<div class="comment-body">
[img]http://blog.brightcove.com/sites/all/uploads/FACEBOOK%20ICON.png[/img] random text here
</div>

как с помощью jquery я могу извлечь значение между [img] и [/img] и установить его как переменную data-src2="" в элементе <img>, дающем

<div class="comment-body">
<img src="samesrc" class="commentimg" data-src2="http://topnews.net.nz/images/YouTube-3.jpg"/> random text here
</div>

<div class="comment-body">
<img src="samesrc" class="commentimg" data-src2="http://blog.brightcove.com/sites/all/uploads/FACEBOOK%20ICON.png"/> random text here
</div>

Мне нечего дать за то, что я пробовал, так как я понятия не имею, как извлечь значение между [img] и [/img]

но в целом ЭТО - это то, чего я пытаюсь достичь, если это не имеет смысла!


person Yusaf Khaliq    schedule 04.12.2011    source источник
comment
Нет необходимости в jQuery, просто регулярное выражение Джейн!   -  person Adam Rackis    schedule 05.12.2011
comment
Итак, вам нужен парсер BBCode?   -  person Rocket Hazmat    schedule 05.12.2011
comment
@Rocket что-нибудь в этом роде, да, это упрощает жизнь!   -  person Yusaf Khaliq    schedule 05.12.2011
comment
что ты уже испробовал? Проявите немного усилий, пожалуйста. Также: stackoverflow.com/questions/1843320/   -  person Matt Ball    schedule 05.12.2011
comment
Хотел бы я проголосовать за комментарий 10 раз   -  person rossipedia    schedule 05.12.2011
comment
Я просмотрел сеть, и я могу обещать, что поиском я не могу найти ничего, кроме вещей для php и c++, которых я не знаю.   -  person Yusaf Khaliq    schedule 05.12.2011
comment
@MДΓΓБДLL я искал BBcode только тогда, когда Rocket упомянул его, извините   -  person Yusaf Khaliq    schedule 05.12.2011
comment
В вашем примере вывода вы фактически удалили что-либо еще в файле div. Это то, чего вы хотите добиться, или просто ошибка?   -  person kubetz    schedule 05.12.2011


Ответы (4)


Протестировано и теперь работает (исходная версия не перебирала все элементы .comment-body и не находила правильно substring()):

var divString, imgString;
$('.comment-body').each(
    function(){
        divString = $(this).text();
        imgString = divString.substring(divString.indexOf('[img]') + 5,divString.indexOf('[/img]'));
        console.log(imgString);
    });

JS-скрипт.


Отредактировано, потому что мне стало немного скучно, и я превратил приведенное выше в более общую функцию:

function findStringBetween(elem,bbTagStart,bbTagClose){
    var tag = bbTagStart;

    function impliedEndTag(tag){
        var impliedEnd = tag.replace(tag.substring(0,1),tag.substring(0,1) + '/');
        return impliedEnd;
    }

    var endTag = bbTagClose || impliedEndTag(tag);

    var divString = $(elem).text();
    var tagString = divString.substring(divString.indexOf('[img]') + tag.length,divString.indexOf('[/img'));
    return tagString;
}
$('.comment-body').each(
    function(){
        /* call with two, or three arguments (the third is the optional 'bbTagClose':
            1. elem = this, the DOM node,
            2. '[img]' = whatever bbCode thing you want to use (I'm not sure what's available),
            3. 'bbTagClose' = the end tag of the bbCode, assuming that the end-tag is the same as
                the opening tag, except with a '/' as the second character, the impliedEndTag() function
                will take care of it for you.
        */
        var elemString = findStringBetween(this,'[img]');
        $(this).replaceWith('<img src="' + elemString + '" class="commentimg" data-src2="'+ elemString +'"/>');
    });

демонстрация JS Fiddle.


Отредактировано после дальнейших вопросов от OP (в комментариях ниже):

... функция добавляет '' к каждому div с классом comment-body, как я могу применить код только к элементам comment-body, которые содержат [img]image src здесь[/img]

Я добавил пару проверок работоспособности, чтобы гарантировать, что функция возвращает false, когда определенный тег не найден:

function findStringBetween(elem,bbTagStart,bbTagClose){
    var tag = bbTagStart;

    function impliedEndTag(tag){
        var impliedEnd = tag.replace(tag.substring(0,1),tag.substring(0,1) + '/');
        return impliedEnd;
    }

    var endTag = bbTagClose || impliedEndTag(tag);
    var divString = $(elem).text().trim(); // added .trim() to remove white-spaces

    if (divString.indexOf(tag) != -1){ // makes sure that the tag is within the string
        var tagString = divString.substring(divString.indexOf('[img]') + tag.length,divString.indexOf('[/img'));
        return tagString;
    }
    else { // if the tag variable is not within the string the function returns false
        return false;
    }
}
$('.comment-body').each(
    function(){
        /* call with two, or three arguments (the third is the optional 'bbTagClose':
            1. elem = this, the DOM node,
            2. '[img]' = whatever bbCode thing you want to use (I'm not sure what's available),
            3. 'bbTagClose' = the end tag of the bbCode, assuming that the end-tag is the same as
                the opening tag, except with a '/' as the second character, the impliedEndTag() function
                will take care of it for you.
        */
       var imgLink = findStringBetween(this,'[img]');
        if (imgLink){ // only if a value is set to the variable imgLink will the following occur
            $(this).replaceWith('<img src="' + imgLink + '" class="commentimg" data-src2="'+ imgLink+'"/>');
        }
    });

демонстрация JS Fiddle.


Отредактировано в ответ на дополнительный вопрос от OP (в комментариях ниже):

[Есть ли] способ предотвратить удаление текста в этом примере «случайный текст здесь»[?]

Да, вы можете .append() или .prepend() изображение в элемент, предварительно обновив текст div, в следующем коде я удалил строку [img]...[/img], чтобы оставить просто другой текст, вставленный этот текст в элемент .comment-body, а затем добавил к нему img вместо использования replaceWith():

function findStringBetween(elem,bbTagStart,bbTagClose){
    var tag = bbTagStart;

    function impliedEndTag(tag){
        var impliedEnd = tag.replace(tag.substring(0,1),tag.substring(0,1) + '/');
        return impliedEnd;
    }

    var endTag = bbTagClose || impliedEndTag(tag);
    var divString = $(elem).text().trim();

    if (divString.indexOf(tag) != -1){
        var elemInfo = [];
        elemInfo.imgString = divString.substring(divString.indexOf(tag) + tag.length,divString.indexOf(endTag));
        elemInfo.text = divString.replace(tag + elemInfo.imgString + endTag, '');
        return elemInfo;
    }
    else {
        return false;
    }
}
$('.comment-body').each(
    function(){
        /* call with two, or three arguments (the third is the optional 'bbTagClose':
            1. elem = this, the DOM node,
            2. '[img]' = whatever bbCode thing you want to use (I'm not sure what's available),
            3. 'bbTagClose' = the end tag of the bbCode, assuming that the end-tag is the same as
                the opening tag, except with a '/' as the second character, the impliedEndTag() function
                will take care of it for you.
        */
       var elemInfo = findStringBetween(this,'[img]');
        if (elemInfo.imgString){
            // or .prepend() if you prefer
            $(this).text(elemInfo.text).append('<img src="' + elemInfo.imgString + '" class="commentimg" data-src2="'+ elemInfo.imgString +'"/>');
        }
    });

демонстрация JS Fiddle.


Использованная литература:

person David says reinstate Monica    schedule 04.12.2011
comment
Сэр, я не понимаю, о чем мир вы говорите. Все, что я увидел, был порыв ветра. - person Matt Ball; 05.12.2011
comment
Я пробовал jsfiddle.net/yusaf/kYK7e/3, это не сработает, могу ли я получить немного руководства.пожалуйста. - person Yusaf Khaliq; 05.12.2011
comment
Я не хочу быть суетливым, но «это не сработает» — это не очень хороший отчет об ошибке. Каким образом это не работает? - person David says reinstate Monica; 05.12.2011
comment
@Yusaf: код Дэвида работает очень хорошо (+1: o)). Вам просто нужно использовать tagString для создания <img> элементов (например, здесь). - person kubetz; 05.12.2011
comment
@dzejkej, спасибо, что изменили функцию, чтобы она фактически возвращала переменную... Я знал, что еще осталось что-то, что я собирался сделать, прежде чем опубликовать это. Примите искренние и благодарные +1 за ваш комментарий, сэр! =) Отредактировал ваши поправки в (хотя я решил заменить изображением, а не сохранить samesrc...) - person David says reinstate Monica; 05.12.2011
comment
jsfiddle.net/kYK7e/34 функция добавляет '‹img›' к каждому элементу div с класс comment-body, как я могу применить код только к элементам comment-body, которые содержат [img]image src здесь[/img] - person Yusaf Khaliq; 05.12.2011
comment
@Yusaf, см. обновленный ответ; последний блок кода должен работать так, как вам нужно. - person David says reinstate Monica; 05.12.2011
comment
есть ли способ предотвратить удаление текста в этом примере «случайный текст здесь» - person Yusaf Khaliq; 05.12.2011
comment
Примечание для читателей: если ваш код часто вызывает findStringBetween(), рассмотрите возможность определения функции impliedEndTag() за пределами findStringBetween(). Когда функция содержит другую функцию, то каждый раз, когда вызывается родительская функция, создаются ее дочерние функции. Таким образом, вызов findStringBetween() 100 раз означает, что impliedEndTag() создается 100 раз. См. это статья. - person kubetz; 05.12.2011
comment
Юсаф, да: см. последнее редактирование и опубликованный JS Fiddle. @dzejkej: хорошая мысль; Я забыл об этом. знак равно - person David says reinstate Monica; 05.12.2011
comment
Я обещаю вам, что у меня очень мало знаний о jquery, только основы, такие как addclass removeclass и т. д., поэтому я ничего не пробовал, если бы у меня были знания о том, с чего начать, у меня было бы, как вы увидите в других более простых вопросах что я спросил, но если вы хотите увидеть, чего я пытался достичь все время, у меня есть ссылка здесь jsfiddle .net/5RcEh/2 это почти в некотором роде похоже на посты в tumblr iamge на панели инструментов. - person Yusaf Khaliq; 05.12.2011
comment
Я добавил несколько справочных материалов в конец поста, чтобы вы могли их прочитать. Чтобы освоиться с JavaScript или даже с jQuery, может потребоваться некоторое время. Просто задайте вопросы, которые у вас есть (после того, как вы попытались изучить их) и, когда сможете, начните отвечать. Сейчас у меня нет времени смотреть на твою скрипку, но я постараюсь не забыть заглянуть завтра, после работы. знак равно - person David says reinstate Monica; 05.12.2011
comment
@DavidThomas Отличная работа, Дэвид! Хороший дополнительный бонус со всеми этими справочными материалами :). - person kubetz; 05.12.2011
comment
@DavidThomas извините за ошибку, но что, если в элементе текста комментария более 1 [img][/img] я пробовал .each для функции, но это не сработает jsfiddle.net/kYK7e/89 - person Yusaf Khaliq; 05.12.2011

Альтернативный ответ на вопрос, написанный Дэвидом Томасом.

Другой способ реализации этого кода — использование регулярных выражений.

// inputText - input text that contains tags
// tagName - name of the tag we want to replace
// tagReplace - replacement for the tag, "$1" will get replaced by content of the tag
function replaceText(inputText, tagName, tagReplace) {
  var regExp = new RegExp('\\[' + tagName+ '\\]([^\\[]*)\\[\/' + tagName + '\\]', 'g');
  return inputText.replace(regExp, tagReplace);
}

$('.comment-body').each(function() {
  var $this = $(this);
  var replacedText = replaceText($this.text(), 'img', '<img src="$1" \/>');
  $this.html(replacedText);
});

Эта реализация также заменит несколько тегов в комментарии.

См. ЭТО фрагмент кода.

Примечание 1:

При реализации этого кода в реальной среде рассмотрите возможность предварительного создания регулярного выражения для всех имен обрабатываемых тегов за пределами replaceText(), чтобы regExp не создавалось каждый раз при вызове replaceText().

Примечание 2:

Чтобы получить точный результат, как в изменении вопроса:

  var replacedText = replaceText($this.text(), 'img', '<img src="$1" \/>');

to

  var replacedText = replaceText($this.text(), 'img', '<img src="samesrc" class="commentimg" data-src2="$1" \/>');
person kubetz    schedule 05.12.2011
comment
как вы можете изменить это, чтобы оно работало вместе с тегами YouTube, которые у меня есть, потому что они также используют $ 1 jsfiddle.net/x7N7S/ 11 - person Yusaf Khaliq; 05.12.2011
comment
спасибо, я пробовал разные вещи, но они бесполезны, теперь я буду публиковать ссылки на неудачи, извините. - person Yusaf Khaliq; 05.12.2011
comment
@Yusaf: Рад помочь :). Извините, если это прозвучало грубо, но создание вопроса помогает другим людям легче находить те же проблемы, люди помогают вам иметь лучшие инструменты (например, блоки кода, возможность редактирования после более чем 5 минут и т. д.), и они могут получить дополнительную репутацию. в качестве бонуса :). - person kubetz; 05.12.2011
comment
Я создал решение проблемы [youtube][/youtube] и [img][/img], с которой я столкнулся, dzejkej и Дэвид Томас, вы были великолепны, большое спасибо. - person Yusaf Khaliq; 05.12.2011

Эта функция находит любые заданные bbcode в любой строке, и если вы хотите, вы можете настроить ее для замены или извлечения содержимого в виде массива из этих bbcode.

//search str 
var search_str = "I love this [img]question.png[/img] Flowers, and [img]answer_1-1.png[/img] you say is that [img]answer_2-1.png[/img] good Point."
//using example
var str = bbcode_search_and_replace($('#search_str').text(),"[img]","[/img]");
$('#search_str').html(str);

function bbcode_search_and_replace(search_str, bb_opening_tag, bb_closing_tag) {
            //search str length
           var sLength = String(search_str).length;
           //bbcode opening tag length
           var fPart_length = String(bb_opening_tag).length;
           //bbcode closing tag length
           var ePart_length = String(bb_closing_tag).length;
           //position index for opening tag 
           var start_idx = 0;
           //position index for closing tag 
           var end_idx = 0; 
           //searching index for opening tag
           var pos_sIdx = 0;
           //position index for closing tag
           var pos_eIdx = 0;
           //var replacement = '[image]';
           var arr = [];
           var idx = 0;           

           //loop
           while(start_idx !== -1) {
               arr[idx] = {};                  

               start_idx = String(search_str).indexOf(bb_opening_tag,pos_sIdx);
               //check for ending
               if(start_idx === -1) {
                   //if exist, last str after closing tag
                   if(idx > 0) arr[idx]['str'] = search_str.substring(pos_sIdx);
                   console.log("arr[idx]['str'] = " + arr[idx]['str']);
                   break;
               }
               //end position index
               pos_eIdx = start_idx + fPart_length;
               end_idx = String(search_str).indexOf(bb_closing_tag,pos_eIdx);                   
               //save str inside bbtags
               arr[idx]['str'] = search_str.substring(pos_sIdx, start_idx);
               console.log("arr[idx]['str'] = " + arr[idx]['str']);
               arr[idx]['src'] =  "<img src = 'img/" + search_str.substring(start_idx + fPart_length, end_idx) + "' />";
               console.log("arr[idx]['src'] = " + arr[idx]['src']);
               arr[idx]['pos_start'] = start_idx + fPart_length;
               arr[idx]['pos_end'] = end_idx;                                

               //Update array and start pos indexes
               idx++;
               pos_sIdx = end_idx + ePart_length;                
          }

           var k = 0;
           var str = "";
           while(k < arr.length) {
               if(arr[k]['src'] === undefined) arr[k]['src'] = "";
               str += arr[k]['str'] + arr[k]['src'];
               k++;
           }

           return str;
        }  
person Amanzhol    schedule 27.06.2013

Используйте функцию JavaScript match(), очень простую в использовании

Например, если у вас есть строка "Быстрая коричневая лиса перепрыгивает через ленивую собаку".

и вам нужен текст только между "быстро" и "лениво"

Используйте ниже

<script type="text/javascript">
   var myStr = "The quick brown fox jumps over the lazy dog.";
   var subStr = myStr.match("quick(.*)lazy");
   alert(subStr[1]);
</script>

Надеюсь, поможет !!

person Mahesh Yadav    schedule 08.09.2017