如何使用jquery将html代码解析为可复制文本

Question

我已经把这个东西放到了一起。我发现以某种方式存储URL部分的最简单方法是在div中。无论如何，我想要的是将所有这些组合在一起并输出为用户可以复制和使用的代码。尽管如此，即使放在<code>或<pre>元素中，HTML也会保持渲染。 IDK我做错了什么。

$(document).ready(function() {
  $("#generate").click(function() {
    $("#output_code").show;
    var stuff0 = '<code>';
    var stuff1 = $('#stuff1').text();
    var stuff2 = $('#username').val();
    var stuff3 = $('#stuff3').text();
    var stuff4 = $('#invite_text').val();
    var stuff5 = $('#stuff5').text();
    var stuff6 = '</code>';

    $('#output_code').append(stuff0 + stuff1 + stuff2 + stuff3 + stuff4 + stuff5 + stuff6);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Username: <input type="text" id="username"><br/>
Invitation text: <input type="text" id="invite_text" value="Follow me on the site!">
<a id="generate">generate link</a>
<div id="stuff1" style="display: none;">
  SOME HTML
</div>
<div id="stuff3" style="display: none;">
  SOME HTML
</div>
<div id="stuff5" style="display: none;">
  SOME HTML
</div>

Answer 1

1）您要求在您的JQuery中显示id output_code，但它从未在您的HTML代码中定义！

2）用它的HTML代码<和>替换所有HTML标签（<和>）和正则表达式

3）对于剪贴板中的副本，我用代码创建了一个临时输入，然后我选择了它并复制了内容。最后，我会删除临时输入，如您所见

$(document).ready(function() {

  $("#generate").click(function() {
    $("#output_code").show;
    var stuff1 = $('#stuff1').html();
    var stuff2 = $('#username').val();
    var stuff3 = $('#stuff3').html();
    var stuff4 = $('#invite_text').val();
    var stuff5 = $('#stuff5').html();
    
    var all_code = stuff1 + stuff2 + stuff3 + stuff4 + stuff5;
    
    var all_code_formatted = all_code
    .split('<')
    .join('&#60;')
    .split('>')
    .join('&#62;'); // replace HTML tags, I'm pretty sure there's a better way to do it with regex but I don't know how to do it
    
    $('#output_code').html('<pre>' + all_code_formatted + '</pre>'); // Render the formatted code
    
    $('#output').html(all_code); // Render the result
    
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(all_code).select();
    document.execCommand("copy");
    $temp.remove(); // Create temporary <input> with your code non formatted, select and copy it and then remove the <input>
    
  });
  
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Username: <input type="text" id="username"><br/>
Invitation text: <input type="text" id="invite_text" value="Follow me on the site!">
<a id="generate">generate link</a>
<div id="stuff1" style="display: none;">
  <a href="https://www.example.com">SOME HTML</a>
</div>
<div id="stuff3" style="display: none;">
  <div>SOME HTML</div>
</div>
<div id="stuff5" style="display: none;">
  <p>SOME HTML</p>
</div>

<h2>The code</h2>
<div id="output_code"></div>

<h2>What it renders</h2>
<div id="output"></div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="10" cols="50"></textarea>

这个回答你的问题吗？请随时询问有关我的代码的任何问题:)