Question

我把报价机放在一起作为freecodecamp.com的练习。你点击按钮，你会得到一个报价。然后，如果您愿意，可以通过单击“推文”按钮来发布推文。我在弄清楚如何获得引用来填充推文字段时遇到了很多麻烦。我终于在这个问题上看了别人的代码，现在它正在填充。

问题：每个引号都填充和个标签。示例：

“当排版上映时，单词会变成图像。 “Shawn Lukas

第二组引号总是出现在作者姓名旁边的行上，这也很烦人。

我不确定

标签是如何进入的，但我希望帮助清除它们。这是我的代码：

HTML

<div id="container">
    <div class="content">
        <div id="quote" class="triangle-isosceles">
            <p>
                <span class="msg"></span>
            </p>
        </div>
        <p id="author"><span class="nme"></span></p>

    </div>

    <button type="button">Get Quote</button>
    <a class="twitter-share-button" id="tweet-quote" target="_blank">
        <button type="button" class="btn btn-primary">Tweet it!</button>
    </a>
</div>

JS

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script>
    $.ajaxSetup({
        cache: false
    });
    $('button').on('click', function() {
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {

           var quote = a[0].content;
            var author = a[0].title;
            $(".msg").empty().append(quote + "<p>— " + author + "</p>")

        $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + quote + '" ' + author));
        });
    });
</script>

我省略了CSS。我无法让jsfiddle工作（从来没有），但这里是CodePen链接：https://codepen.io/dtarvin/pen/pePowj

更新：刚刚找到一个带撇号的引号，并取回了这些数字而不是符号。当引号是随机的时，不知道如何处理。

谢谢！

Answer 1

你在附加代码中有"— " + author + ""，关于你需要解析引用以将它们切换到正常版本的html实体代码。您还可能需要删除a[0].content变量中的标记。如果你无法控制返回的内容，你可能需要做更多的过滤来捕捉这样的东西。

或者，如果您有权访问服务器端脚本，则使用此脚本获取报价并返回已清理的报价。

例如，如果您访问网址https://quotesondesign.com/wp-json/posts，您会在报价中看到标记。

所以你基本上需要清理content变量的内容。

例如，要在内容字符串中重新发送p标记，请尝试：

var quote = a[0].content.replace(/<p[^>]*>/g, '').replace(/<\/p>/g, '');

如果您需要显示这些标签，那么您可以添加一个单独的功能，按下它的推文按钮，将为您执行此操作。

所以你可以在浏览器上使用它们，但是在Twitter上发布所有条纹和好的信息

Answer 2

试试这个工作

<script>
        $.ajaxSetup({
            cache: false
        });
        $('button').on('click', function() {
            $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {

               var quote = a[0].content;
                var author = a[0].title;
                $(".msg").empty().append(quote + author);

                var html = quote + author;
    var div = document.createElement("div");
    div.innerHTML = html;
    var text = div.textContent || div.innerText || "";

         $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent( text ));
            });
        });

</script>

来自网页的推文字段中的段落标签

2 个答案: