我创建了一个函数，它将在JSON文件中搜索不同的标签，像[image]和[gallery]这样的标签。如果匹配，它将返回并用新输出替换它。像图像对象或幻灯片一样。
JSON对象可以包含多个相同类型的标记，或者同时包含不同的标记。因此，对象可以包含两个[image]标记，例如
JSON
问题是，如果找到多个[image]标签，则将其替换为相同的内容。我正在寻找一个搜索标签的脚本，直到不再有匹配为止。非常感谢@debatanu的解决方案。
不幸的是，我对这个脚本有了一些额外的愿望，因为现在像image这样的标签将被替换为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中设置了两个图像标记。
我希望通过这次更新，问题更加准确，问题也可以更明确地定义。如果您有任何问题，请告诉我，我希望我们能找到正确的解决方案：）
答案 0 :(得分：4)
您可以使用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 '';
}
}