Jquery复制到剪贴板 - 如何忽略特殊的css＆amp; jquery字符

Question

我正在使用ajax从我的数据库中请求一个唯一的字符串。必须按原样复制此字符串，因为其他工具可以对其进行验证。

问题是我得到了：

Error: Syntax error, unrecognized expression

可能是因为此字符串中的符号被识别为css选择器或jquery运算符。

以下是我用来复制到剪贴板的代码：

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

这是我的ajax代码：

$.ajax({
    url : "/copy/pob-source/" + build_id,
    type : "get",
    contentType: 'application/json;charset=UTF-8',
    //data : {'data':$.trim($("#stats-string").text())},
    success : function(response) {
        copyToClipboard(response)
        console.log("success, data updated");
    },
    error : function(xhr) {
        console.log("updating data failed");
    }
});

在我的ajax请求中，我得到了触发错误的响应：

copyToClipboard(response)

以下是控制台中的错误输出：

所以基本上我试图找到一个解决方案，因此响应将作为原始字符串处理。

Answer 1

您的copyToClipboard函数希望接收DOM元素作为输入。它将其包装为jquery对象，并尝试在前往text()的途中发送其execCommand('copy')内容。

你传递的功能不是一个DOM元素，它是一个原始的AJAX响应。这是对代码的略微修改演示 - 我将其更改为jsonp请求，以便ajax调用可以在堆栈片段中工作：

function copyToClipboard(element) {
  //$(element).text() will be empty, because you're not passing it a DOM element, it's the full AJAX response:
  console.log($(element).text());
  console.log(element); 
  var $temp = $("<input>");
  $("body").append($temp);
  
  //$temp.val($(element).text()).select(); // won't work
  $temp.val(element.query.results.channel.title).select(); // this will work, for this example JSON
  document.execCommand("copy");
  $temp.remove();
}

// random JSON url just so we can demo an ajax call
var apiUrl = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"

$.ajax({
  url: apiUrl,
  dataType: "jsonp", // <-- changed from "get" just for demo
  contentType: 'application/json;charset=UTF-8',
  success: function(response) {
    copyToClipboard(response)
    console.log("success, data updated");
  },
  error: function(xhr) {
    console.log("updating data failed");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我不确定你是如何得到那个特定的语法错误的，但你绝对应该仔细检查以查看你传递给copyToClipboard的内容，并修改AJAX success()函数以传递只有您真正想要的数据，而不是完整的响应对象;并修改copyToClipboard以期望在param中接收所需数据而不是DOM对象作为输入。