问题
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>
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>
I don't have anything to give for what I have tried as I don't have a clue how to extract the value between [img] and [/img]
but overall THIS is what I'm trying to achieve if it doesn't make sense!
回答1:
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 Fiddle.
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 Fiddle demo.
Edited following further questions from OP (in comments, below):
...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]
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 Fiddle demo.
Edited in response to further question from OP (in comments, below):
[Is] there a way of preventing it from removing the text in this example 'random text here'[?]
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 Fiddle demo.
References:
- jQuery stuff:
- append().
- each().
- prepend().
- replaceWith().
- text().
- JavaScript (all at the Mozilla Developer Network's JavaScript documentation resource:
- indexOf().
- length.
- replace().
- substring().
- trim().
回答2:
Alternative answer to the one wrote by David Thomas.
Another way how to implement this code is to use regular expressions.
// 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);
});
This implementation will also replace multiple tags within the comment.
See THIS code snippet.
Note 1:
When implementing this code in real environment please consider pre-creating regular expression for all handled tag names outside replaceText() so regExp won't be created everytime replaceText() is called.
Note 2:
To get the exact output as in the question change:
var replacedText = replaceText($this.text(), 'img', '<img src="$1" \/>');
to
var replacedText = replaceText($this.text(), 'img', '<img src="samesrc" class="commentimg" data-src2="$1" \/>');
回答3:
This function finds any given bbcodes in any string and if you want, you can configure it for replacing or extract content as array from those 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;
}
回答4:
Use JavaScript match() function, very easy to use
Like if you have a string "The quick brown fox jumps over the lazy dog."
& you need the text just between "quick" and "lazy"
Use below
<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>
Hope it helps !!
来源：https://stackoverflow.com/questions/8378575/get-string-between-two-strings-using-jquery