我创建了一个函数，它将在 JSON 文件中搜索不同的标签，如 [image] 和 [gallery] 等标签。如果匹配，它将返回并用新的输出替换它。像图像对象或幻灯片。
一个JSON对象可以包含多个相同类型的标签，也可以同时包含不同的标签。因此一个对象可以包含两个 [image] 标签，例如
JSON
问题是，如果找到多个 [image] 标签，它会被替换为相同的内容。我一直在寻找一个正在搜索标签的脚本，直到不再有匹配项为止。非常感谢@debatanu 提供的解决方案。
不幸的是，我对脚本有一些额外的希望，因为现在像图像这样的标签将被替换为 JSON 中媒体数组的最后一个图像对象，它只会获取并替换第一个标签。
我想知道是否可以检查每个标签并用新输出替换每个标签。
搜索标签
filterText: function(data) {
// Loop through JSON data
// Check if [tag] in data.text exists
var dataText = data.text;
var tags = {
"gallery": /\[gallery\]/ig,
"image": /\[image\]/ig
};
if (dataText != undefined) {
var raw_data = dataText;
for (var key in tags) {
if (tags.hasOwnProperty(key)) {
var tag = tags[key];
var tagArr = [];
// Check if [tag] in data.text exists
while ( (tagArr = tag.exec(dataText)) !== null ) {
// Call functions
if (key == "gallery") {
console.error('GALLERY');
parsedHTML = raw_data.replace(tagArr[0], shortcodeController.gallery(data));
raw_data = parsedHTML;
return parsedHTML;
}
if (key == "image") {
console.error('IMAGE');
parsedHTML = raw_data.replace(tagArr[0], shortcodeController.image(data));
raw_data = parsedHTML;
return parsedHTML;
// model.find('p').html(parsedHTML);
}
}
}
}
};
调用filterText函数
getDataPopup: function(data) {
if (data.text != undefined) {
$('.js-popup .article').html(data.text);
var parsed = dataController.filterText(data);
console.log('parsed: ', parsed);
$('.js-popup .article').html(parsed);
} else {
$('.js-popup .article').html(data.intro);
}
},
以上函数将在 while 循环内搜索标签。 这个脚本被调用，当用户点击一个项目时，将打开一个弹出屏幕。
当用户单击一个项目时，getDataPopup 函数调用的脚本将搜索匹配项，当找到匹配项时，它将调用函数 shortcodeController。 image(data) 将新输出返回给变量:parsedHTML。
生成新输出的函数如下所示:
image: function(data) {
// Development
console.log('shortcodeController.image');
var raw_data = data.text;
var outputHTML;
if (data.media != undefined) {
for (var i = 0; i < data.media.length; i++) {
if (data.media[i].image != undefined) {
outputHTML = '<div class="image">';
// Extract filename
var url = data.media[i].image.src;
var filename = url.substring( url.lastIndexOf('/') + 1, url.lastIndexOf('.') );
// console.log(filename);
outputHTML += '<img src="' + url + '" alt="' + filename + '" />';
//data.media[i].image = undefined;
outputHTML +='</div>';
}
};
return outputHTML;
} else {
// If media doesn't exists return empty string
return '';
}
},
Debatanu 提到我应该在包含实际图像对象的 outputHTML 之后直接使用 data.media[i].image = undefined;，但这会导致未定义的错误。第一个 [image] 标签被替换为 undefined。当我注释掉这一行时，它将被媒体数组中的最后一个图像对象替换，如前所述。
也许它不能正常工作，因为 while 循环只查找图库和图像标签，如果匹配，则运行一次，因为他已经看到了标签。然后它将再次被调用，并用媒体数组中的第二个图像对象再次替换第一个图像标签。是否应该在 if 语句中添加一个 while 循环来判断它是画廊还是图像，以便为文本对象中的每个标签调用函数？
我还注意到，当我在控制台记录 tagArr 时，当我在 while 循环之后经过它时，它会给我一个 null 值，而当我在 [] 时，它会给我一个空数组创建数组后直接粘贴。除此之外，当我在 while 循环启动后直接控制台日志标签时，它只控制台日志标签一次，而在 JSON 中设置了两个图像标签。
最佳答案
您可以使用 exec 并使用
var dataText = data.text;
var tags = {
"gallery": /\[gallery\]/ig,
"image": /\[image\]/ig,
};
if (dataText != undefined) {
var raw_data = dataText;
for (var key in tags) {
if (tags.hasOwnProperty(key)) {
var tag = tags[key];
var arr=[];
while ((arr= tag.exec(dataText)) !== null) {
//arr[0] will contain the first match
//var newTag=newTags[key];
//you need to replace the matched output
//so no need for newTag
if (key == "gallery") {
console.error('GALLERY');
//replace the matched output arr[0]
//instead tag or newTag
//Since u have [] to replace we need to ommit the regex literal format /<<exp>>/
parsedHTML = raw_data.replace(arr[0], Triptube.shortcodeController.gallery(data));
//Need to add this line for reflecting the changed data
raw_data=parsedHTML;
model.find('p').html(parsedHTML);
}
if (key == "image") {
console.error('IMAGE');
//replace the matched output arr[0]
//instead tag or newTag
//Since u have [] to replace we need to ommit the regex literal format /<<exp>>/
parsedHTML = raw_data.replace(arr[0], Triptube.shortcodeController.image(data));
console.log(parsedHTML);
//Need to add this line for reflecting the changed data
raw_data=parsedHTML;
model.find('p').html(parsedHTML);
}
}
}
}
}
您可以在 MDN 中找到更多相关信息
在每个循环中，exec 都会为您提供下一个匹配项，直到没有匹配项为止。
编辑
我从一开始就添加了整个过滤器代码。您会看到 raw_data 变量应该在循环之前赋值。完成后，下面带有图像函数的代码应该会为您提供正确的结果。
编辑 2
首先 filterText 函数将在解析完 html 后返回解析后的 html
filterText: function(data) {
// Loop through JSON data
// Check if [tag] in data.text exists
var dataText = data.text;
var tags = {
"gallery": /\[gallery\]/ig,
"image": /\[image\]/ig
};
if (dataText != undefined) {
var raw_data = dataText,
newData=JSON.parse(JSON.stringify(data));//Copy of the data object
for (var key in tags) {
if (tags.hasOwnProperty(key)) {
var tag = tags[key];
var tagArr = [];
// Check if [tag] in data.text exists
while ( (tagArr = tag.exec(dataText)) !== null ) {
// Call functions
if (key == "gallery") {
console.error('GALLERY');
parsedHTML = raw_data.replace(tagArr[0], shortcodeController.gallery(newData));
raw_data = parsedHTML;
//return parsedHTML;
}
if (key == "image") {
console.error('IMAGE');
parsedHTML = raw_data.replace(tagArr[0], shortcodeController.image(newData));
raw_data = parsedHTML;
//return parsedHTML; we will return the parsed HTML only when all the tags have been replaced
// model.find('p').html(parsedHTML);
}
}
}
}
return parsedHTML; //return the parsed HTML here
};
接下来是 image 函数，它将解析图像，
image: function(data) {
// Development
console.log('shortcodeController.image');
var raw_data = data.text;
var outputHTML;
if (data.media != undefined) {
for (var i = 0; i < data.media.length; i++) {
if (data.media[i].image != undefined) {
outputHTML = '<div class="image">';
// Extract filename
var url = data.media[i].image.src;
var filename = url.substring( url.lastIndexOf('/') + 1, url.lastIndexOf('.') );
// console.log(filename);
outputHTML += '<img src="' + url + '" alt="' + filename + '" />';
outputHTML +='</div>';
data.media[i].image = undefined;
//Uncommented the above code, because now the operation will be done on the copy of the original data object
}
};
return outputHTML;
} else {
// If media doesn't exists return empty string
return '';
}
}
关于javascript - 如何检查并返回数据直到没有匹配项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33934181/