Question

我使用instagram API来加载网页上的最后20条帖子。我检索了图片以及帖子的文字，效果很好。我试图实现的其他目的是删除/替换所有以#开头的单词，即所谓的“标签”。这是我遇到的麻烦。当前，所有20个文本都被替换为文本1，其中hastags已成功替换。

我的 JS （代码的相关部分位于您可以看到我尝试的内容的末尾）：

    var request = new XMLHttpRequest();
    request.open('GET', 'https://api.instagram.com/v1/users/self/media/recent/?access_token=737514925.b2b5dcf.40705a1de9b54c039e840c52fe08b39c&count=20', true);

    request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
            // Success!
            var data = JSON.parse(request.responseText);
            for (var i=0;i < data.data.length;i++) {
                var container = document.getElementById('insta-feed');
                var imgURL = data.data[i].images.standard_resolution.url;
                var link = data.data[i].link;
                var text = data.data[i].caption.text;

                var imageDiv = document.createElement('div');
                imageDiv.setAttribute('class','insta-pic col-md-4');
                container.appendChild(imageDiv);

                var a = document.createElement('a');
                a.setAttribute('href', link);
                a.setAttribute('target', '_blank');

                var img = document.createElement('img');
                img.setAttribute('src',imgURL)
                img.setAttribute('class','img-instagram')

                var textDiv = document.createElement('div');
                textDiv.setAttribute('class','insta-text col-md-7');
                container.appendChild(textDiv);

                var p = document.createElement('p');
                p.innerHTML = text;

                imageDiv.appendChild(a);
                textDiv.appendChild(p);
                a.appendChild(img);

            }
        }


        // This is the (relevant) part that does not work
        var regexHash = /#\w+/gm;
        function replacer(){
            return '#hereWasSomeTag';
        }
        for (var i=0;i < data.data.length;i++) {
            var instaPostText = $('.insta-text p').html();
            $('.insta-text p').html(instaPostText.replace(regexHash, replacer));
        }
        // end of part that does not work

    };

    request.onerror = function() {
        // There was a connection error of some sort
    };
    request.send();

或JSFiddle（请注意，在JSFiddle上，完全相同的代码会出现不同的问题，不会替换任何文本，但是所有原始文本都是可见的）。

我想这个问题很容易解决，但是由于我对JS的了解不足，所以我不知道如何解决。

Answer 1

    for (var i=0;i < data.data.length;i++) {
        var instaPostText = $('.insta-text p').html();
        $('.insta-text p').html(instaPostText.replace(regexHash, replacer));
    }

$('.insta-text p')一直在选择相同的元素，您没有将其限制为任何特定的父元素。与jQuery getter方法一样，.html()将为您提供 first 匹配元素的HTML。设置器的行为有所不同，因此在您设置的下一行中，将 first 匹配段落的内容替换为 all 匹配段落。循环执行多次，不会改变结果。

为什么在创建这些元素的循环之后？直接在您创建文本节点的地方执行此操作：

        var p = document.createElement('p');
        p.innerHTML = text.replace(regexHash, replacer);

https://jsfiddle.net/vcmxpe39/2/

替换Instagram帖子中的部分文本（＃标签）

1 个答案: