javascript - 替换 Instagram 帖子中的部分文本(主题标签)

Question

我使用 Instagram API 加载网页上的最后 20 个帖子。我检索了图像和帖子的文本，效果很好。我尝试实现的其他目标是删除/替换所有以 # 开头的单词，即所谓的“主题标签”。这是我遇到的麻烦。目前，20 条文本全部替换为文本 1，其中标签已成功替换。

我的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() 将获取第一个匹配元素的 HTML。 setter 的行为不同，因此在下一行中，您设置替换第一个匹配段落的内容，以替换所有匹配的段落。您在循环中多次执行此操作不会改变结果。

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

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

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