รับสตริงระหว่างสองสายโดยใช้ jquery

ทดสอบแล้วใช้งานได้แล้ว (เวอร์ชันดั้งเดิมไม่ได้วนซ้ำผ่านองค์ประกอบ .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

...ฟังก์ชั่นจะเพิ่ม '' ให้กับทุกๆ div ด้วย class comment-body ฉันจะใช้โค้ดกับองค์ประกอบ comment-body ที่มี [img]image src ที่นี่[/img] ได้อย่างไร

ฉันได้เพิ่มการตรวจสอบสติสองสามอย่างเพื่อให้แน่ใจว่าฟังก์ชันส่งคืนเท็จเมื่อไม่พบแท็กที่กำหนด:

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

[มี] มีวิธีป้องกันไม่ให้ลบข้อความในตัวอย่างนี้ 'ข้อความสุ่มที่นี่'[?]

ใช่ คุณสามารถ .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

อ้างอิง:

• jQuery stuff:
  • append().
  • each().
  • prepend().
  • replaceWith()
  • text().
• JavaScript (all at the Mozilla Developer Network's JavaScript documentation resource:
  • indexOf().
  • length
  • replace()
  • substring()
  • trim()

คำตอบทางเลือกสำหรับคำตอบที่เขียนโดย David Thomas

อีกวิธีหนึ่งในการติดตั้งโค้ดนี้คือการใช้นิพจน์ทั่วไป

// 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" \/>');

ฟังก์ชันนี้จะค้นหา bbcodes ที่ระบุในสตริงใดๆ และหากต้องการ คุณสามารถกำหนดค่าให้แทนที่หรือแยกเนื้อหาเป็นอาร์เรย์จาก bbcodes เหล่านั้นได้

//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;
        }  

ใช้ฟังก์ชันจับคู่ JavaScript () ใช้งานง่ายมาก

เช่น หากคุณมีเชือก "สุนัขจิ้งจอกสีน้ำตาลกระโดดข้ามสุนัขขี้เกียจ"

และคุณต้องการข้อความระหว่าง "รวดเร็ว" และ "ขี้เกียจ"

ใช้ด้านล่าง

<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>

หวังว่ามันจะช่วยได้ !!