Question

我正在使用Bubble.is创建一个前端来存储关键字和相关的URL。然后，我想使用Bubble API在论坛上找到列出的每个关键字，然后将每个关键字替换为其关联的URL。

例如，如果某人发布包含关键字Google的帖子，我希望它用<a href='www.google.com'>Google</a>替换Google，我希望在可能的情况下使用Javascript来实现。

此GET：GET https://findandreplace.bubbleapps.io/version-test/api/1.1/obj/keywords

获得此响应：

    {
    "response": {
        "results": [
            {
                "keyword": "Google",
                "Created Date": "2018-02-03T19:11:09.090Z",
                "Created By": "1508757117987x170844219857826800",
                "Modified Date": "2018-02-03T19:11:09.090Z",
                "url": "https://www.google.com",
                "_id": "1517685069090x817754573188722200",
                "_type": "custom.keywords"
            },
            {
                "keyword": "Amazon",
                "Created Date": "2018-02-03T19:22:24.551Z",
                "Created By": "1517685580376x819307316327467500",
                "Modified Date": "2018-02-03T19:22:24.598Z",
                "url": "https://www.amazon.com",
                "_id": "1517685742904x154482585500647420",
                "_type": "custom.keywords"
            },
            {
                "keyword": "Zillow",
                "Created Date": "2018-02-03T19:30:42.087Z",
                "Created By": "1517685580376x819307316327467500",
                "Modified Date": "2018-02-03T19:30:42.138Z",
                "url": "http://www.zillow.com",
                "_id": "1517686241201x951191101229760500",
                "_type": "custom.keywords"
            },
            {
                "keyword": "Microsoft",
                "Created Date": "2018-10-19T21:39:28.255Z",
                "Created By": "1539985113946x455720216501504200",
                "Modified Date": "2018-10-19T21:39:28.306Z",
                "url": "http://www.microsoft.com",
                "_id": "1539985167224x910185981874274300",
                "_type": "custom.keywords"
            },
            {
                "keyword": "pillow",
                "Created Date": "2018-10-20T03:39:18.907Z",
                "Created By": "1540004754069x571366896387189600",
                "Modified Date": "2018-10-20T03:39:18.957Z",
                "url": "http://superfluous.io/",
                "_id": "1540006758226x128922359984291840",
                "_type": "custom.keywords"
            },
            {
                "keyword": "bug",
                "Created Date": "2018-10-20T03:41:38.227Z",
                "Created By": "1540004754069x571366896387189600",
                "Modified Date": "2018-10-20T03:41:38.280Z",
                "url": "https://www.xkcd.com/1700/",
                "_id": "1540006897525x482895914136502300",
                "_type": "custom.keywords"
            }
        ],
        "cursor": 0,
        "count": 9,
        "remaining": 0
    }
}

如何使用此响应来查找关键字并将其替换为关联的URL？

更新：

下面是一些用URL替换关键字的基本代码，但是如何使用API中的数据来做到这一点？

<html>
<head>
<script type='text/javascript' 
 src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'> 
</script>
</head>
<body>
 This test is to see if I can conver the word Google to a URL.
<script type="text/javascript">
 (function($) {
 var keywordtest = $("body");
 keywordtest.html(keywordtest.html().replace(/google/ig, '<a 
 href="http://google.com">Google</a>')); 
 })(jQuery)
</script>
</body></html>

Answer 1

如果符合您的目标，可以尝试以下方法；

<html>
<head>
<script type='text/javascript' 
 src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'> 
</script>
</head>
<body>
 This test is to see if I can convert the word Google to a URL.
<script type="text/javascript">
 (function($) {
      $.ajax({
            type: "GET",
            dataType: 'json',
            url: "https://findandreplace.bubbleapps.io/version-test/api/1.1/obj/keywords",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                msg.response.results.forEach(function(res){
                   if(res.keyword === 'Google'){
                      res.keyword = '<a href="http://google.com">Google</a>';
                   }
                });

                $("body").text(JSON.stringify(msg));             
            }
      });
 })(jQuery)
</script>
</body></html>

Answer 2

我能够找到一个朋友来帮助我，我们想到了这一点：

    <!-- include JQuery from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   

<script type="text/javascript">
    $(document).ready(function() {
        // https://findandreplace.bubbleapps.io/version-test/1.1/obj/keywords

        // set Async false for .each loop to work synchronously
        $.ajaxSetup({ async: false });

        txt = $('body').html(); 
        //alert (txt);

        $.ajax({
            url: "https://findandreplace.bubbleapps.io/version-test/api/1.1/obj/keywords",
            success: function(data){
                //console.log(data);
                $.each(data.response.results, function() {
                    keyword = this['keyword'];
                    url     = this['url'];

                    var regex = new RegExp(keyword, "ig");

                    replaceURL = "<a href='" + url + "'>" + keyword + "</a>";   
                    txt = txt.replace(regex, replaceURL);
                }); //end loop through keywords
                //alert("after keyword " + keyword + "----" + txt)
            } //end success function
        }); //end ajax call

        $('body').html(txt);

        //reset JS sync to true
        $.ajaxSetup({async: true}); 
    }); // end doc ready 

</script>

问题在于它现在将替换网站上超链接中的文本，因此我需要找出一种方法来不替换a和h标签中的任何内容。

根据API响应查找关键字并将其替换为URL

2 个答案: