我创建了一个函数，它将在 JSON 文件中搜索不同的标签，如 [image] 和 [gallery] 等标签。如果匹配，它将返回并用新的输出替换它。像图像对象或幻灯片。

一个JSON对象可以包含多个相同类型的标签，也可以同时包含不同的标签。因此一个对象可以包含两个 [image] 标签，例如

JSON

http://snippi.com/s/bzrx3xi

问题是，如果找到多个 [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/