我如何从 p 标签中获取文本并将其插入到 href 链接中答案

【问题标题】：how could I grab the text from a p tag and insert it in a href link我如何从 p 标签中获取文本并将其插入到 href 链接中
【发布时间】：2017-11-27 16:00:24
【问题描述】：

我的页面上有一个 twitter 按钮，单击它会带您进入 twitter 页面，您可以在其中输入您的消息的文本区域。我希望用户在点击“twitter”按钮时将他们带到 twitter 和来自

的文本页面上的

标签会自动插入到 textarea 中。这是我的按钮

<div id="twitter-btn" class="center">
    <a class="btn btn-info btn-social btn-twitter " href="https://twitter.com/intent/tweet?text=" target="_blank">
    <i class="fa fa-twitter"> Twitter</i>
  </a> 
      </di>

现在 twitter 提供了他们自己的按钮和如何使用它的文档。

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet?text=Hello%20world">
Tweet</a>

注意字符串是如何附加到 url 末尾的...这里是 twitter 按钮文档 https://dev.twitter.com/web/tweet-button 我有一个 id 为“内容”的 div 并插入了一个

段落。如何从段落中获取文本并附加到 twitter url。这是 codepne.io 上的项目 https://codepen.io/zentech/pen/ZyyGgq?editors=1000

【问题讨论】：

标签： javascript jquery html twitter

【解决方案1】：

首先，您不应该隐藏需要帮助的按钮。 :|

查看CodePen

代码：

$('.btn-twitter').on( 'click', function( evt ){
    evt.preventDefault();
    var tweetURL = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( $('p.sub_text').text() );
    window.open(tweetURL, '_blank');
} )

要在运行时（onclick）完成此操作，除了阻止默认超链接操作，然后以 JS 方式执行之外，别无选择。

【讨论】：

别忘了使用encodeURIComponent 进行必要的转义。

【解决方案2】：

它的工作方式是，您使用特殊的 GET 参数 (text) 将用户链接到一个特殊的 URL (https://twitter.com/intent/tweet)，其中包含用于预填充推文的文本。

由于您的内容是动态的，因此您必须使用 JavaScript 来完成。您已经在使用 jQuery 来获取报价文本并融入 twitter 按钮，因此您应该将其添加到您的 $('#getMessage').on("click", function() { $("#twitter-btn").show(); 附近的某个地方

var text = encodeURIComponent($('#content').text());
$('#twitter-btn a').attr('href', 'https://twitter.com/intent/tweet?text=' + text);

请注意，您必须使用encodeURIComponent 才能使?, , &, /, ... 等特殊字符正常工作。

【讨论】：

【解决方案3】：

改为在您的 javascript 中创建链接。

<p id="quote">This is a quote</p>
<button id="tweet" type="button">Tweet</button>

Javascript

$( "#tweet" ).click(function() {
  // make the text url friendly
  var text = encodeURI($( "#quote" ).text());
  window.location.replace("https://twitter.com/intent/tweet?text=" + text)
});

【讨论】：

【解决方案4】：

希望这对你有用。我使用 jquery 是因为我最熟悉它。我在浏览器中对其进行了测试，它适用于我。

        <div id="twitter-btn" class="center">
        <button class="btn btn-info btn-social btn-twitter" target="_blank">
           <i class="fa fa-twitter"> Twitter</i>
        </button> 
    </div>

    <div id="content">bvnvcbnvbnnb</div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script>
        $('.btn-twitter').on('click', function(){
            var content = $('#content').text();
            window.location.href = "https://twitter.com/intent/tweet?text="+encodeURIComponent(content);
        });
    </script>

【讨论】：