Question

下面的脚本将替换真实图像对象的所有图像标记。很遗憾，我收到了Uncaught TypeError错误。这是因为在我的示例中，Javascript从0到3计数，而不是1到4.数组的长度为4。

如何避免此错误（因此我也会在while循环后获取控制台日志？）

var raw_content = {
        "text"  : "Test image 1 [image] Test image 2 [image] Test image 3 [image] Test image 4 [image]",
        "media" :[
                    {
                        "src":          "http://placehold.it/400x200",
                        "caption":      "This is a caption"
                    },{
                        "src":          "images/gallery/sh0.png",
                        "caption":      "This is a caption"
                    },{
                        "src":          "http://placehold.it/400x200",
                        "caption":      "This is a caption"
                    },{
                        "src":          "images/gallery/sh0.png",
                        "caption":      "This is a caption"
                    }
                ]
    };

    // find img one by one
    var image_counter = 0;
    var text_buffer = raw_content.text;

    var replaceTag = function () {
        text_buffer = text_buffer.replace("[image]", raw_content.media[image_counter].src);
        console.log(text_buffer);
        console.log(image_counter);
        console.dir(raw_content.media[image_counter]);
        image_counter++;
    };

    while ( text_buffer.search('[image]') !== null ) {
        replaceTag();
    }

    console.log('String buiten while loop = %s', text_buffer);

Answer 1

这个问题与1-4对0-3无关，它与String#search的作用有关。

String#search将您提供的内容解释为正则表达式。因此，[image]表示＆＃34;以下任何字符：i，m，a，g或e＆＃34;因为[...]是正则表达式中的字符类。（稍后，您的String#replace正常工作，因为如果您给String#replace一个字符串，它会按字面意思使用它。）因此，即使在四次替换后字符串也包含这些字符，您尝试第五次运行，当你遇到麻烦时就是这样。另外，String#search分别返回找到字符串的索引，该索引将是一个数字（如果未找到则为-1），总是为!== null。

如果您只是将循环更改为：

while ( text_buffer.indexOf('[image]') !== -1 ) {
    replaceTag();
}

...你不会超越数组的末尾（只要文本和数组匹配，例如，文本没有更多出现[match]比数组有条目）。

直播示例：

＆＃13;

var raw_content = {
        "text"  : "Test image 1 [image] Test image 2 [image] Test image 3 [image] Test image 4 [image]",
        "media" :[
                    {
                        "src":          "http://placehold.it/400x200",
                        "caption":      "This is a caption"
                    },{
                        "src":          "images/gallery/sh0.png",
                        "caption":      "This is a caption"
                    },{
                        "src":          "http://placehold.it/400x200",
                        "caption":      "This is a caption"
                    },{
                        "src":          "images/gallery/sh0.png",
                        "caption":      "This is a caption"
                    }
                ]
    };

    // find img one by one
    var image_counter = 0;
    var text_buffer = raw_content.text;

    var replaceTag = function () {
        text_buffer = text_buffer.replace("[image]", raw_content.media[image_counter].src);
        /*
        console.log(text_buffer);
        console.log(image_counter);
        console.dir(raw_content.media[image_counter]);
        */
        image_counter++;
    };

    while ( text_buffer.indexOf('[image]') !== -1 ) {
        replaceTag();
    }

    document.body.innerHTML =
      'String buiten while loop = ' + text_buffer;

＆＃13;

当然，转义[和]并与-1进行比较（为清晰起见，可能使用文字正则表达式）：

while ( text_buffer.search(/\[image\]/) !== -1 ) {
    replaceTag();
}

虽然为Oriol points out，但如果您需要正则表达式，但只是检查是否有任何事件发生，可能最好使用test：

while ( /\[image\]/.test(text_buffer) ) {
    replaceTag();
}

如何使用while循环解决未定义的属性？

1 个答案: