获得使用jquery两个字符串之间串 [英] get string between two strings using jquery

问题描述

如果我有这样的HTML

If I have this 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] 并将其设置为变量数据SRC2 =的＆LT之内; IMG＆GT;给元素

how using jquery can I extract the value between [img] and [/img] and set it as a variable data-src2="" within an <img> element giving

<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] 和<$ C之间的值$ C> [/ IMG]

但总体 本 是什么，我想实现，如果它没有意义！

but overall THIS is what I'm trying to achieve if it doesn't make sense!

推荐答案

测试，现在工程（原版本没有经过全体的.comment体循环元素，或找到子（）正确）：

Tested and now works (original version didn't iterate through all .comment-body elements, or find the substring() properly):

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

JS小提琴。

编辑，因为我有一点点无聊，所以变成了入一个更通用的功能：

Edited because I got a little bit bored, and so turned the above into a more-generic function:

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提琴演示。

---

编辑以下从OP进一步的问题（在评论，下同）：

---

Edited following further questions from OP (in comments, below):

...功能增加了一个'与类注释的身体怎么只拥有code格每次加评论体包含此处[IMG]图片src [/ IMG]元素

...the function adds an '' to every div with the class comment-body how can i only have the code applied to comment-body elements that contain [img]image src here[/img]

我添加了一对夫妇的完整性检查，确保当定义的标记没有找到函数返回false：

I've added a couple of sanity-checks, to ensure that the function returns false when the defined tag isn't found:

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提琴演示。

---

编辑针对进一步的问题，从OP（注释中，下）：

---

Edited in response to further question from OP (in comments, below):

[是]有$ P $的从这个例子中删除文本'在这里随机文本pventing它的方式[？]

[Is] there a way of preventing it from removing the text in this example 'random text here'[?]

是的，你可以通过 .append（）或。prePEND（）图片进入元素，首先经过更新的文字 DIV ，在下面的code我已经删除了 [IMG] ... [/ IMG] 字符串，留下的只是的其他文字，插入文本到的.comment体元素，然后附加了 IMG 来的，而不是使用 replaceWith（）：

Yes, you can .append(), or .prepend() the image into the element, after first updating the text of the div, in the following code I've removed the [img]...[/img] string, to leave just the other text, inserted that text into the .comment-body element and then appended the img to that, instead of using 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提琴演示。

参考文献：

• jQuery的东西：
  
  
  
  • 追加（） 。
  
  
  • 每（） 。
  
  
  • prePEND（） 。
  
  
  • replaceWith（） 。
  
  
  • 文本（） 。
  
  
  
  
  • <$c$c>indexOf().
  
  
  • <$c$c>length.
  
  
  • <$c$c>replace().
  
  
  • <$c$c>substring().
  
  
  • <$c$c>trim().
  
  

  这篇关于获得使用jquery两个字符串之间串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！