Double Quotes打破HTML属性和JS

So I have some ajax requests that pull data from our product pages. These product pages can have a " (double quote) in their URL somewhere. This is a necessary evil, I'd explain why, but please just accept that I have to keep the double quotes in these URLs.

所以我有一些从我们的产品页面中提取数据的ajax请求。这些产品页面的URL可能有“双引号”。这是一个必要的恶,我会解释原因,但请接受我必须在这些URL中保留双引号。

In a nutshell, I am pulling stuff from an Excel XML file, then conducting ajax requests with Javascript/jQuery that pull text and data from "Product Pages" and then displaying that stuff on a "Product Listings" page. Again, the URLs of these "Product Pages" sometimes have double quotes in them.

简而言之,我从Excel XML文件中提取内容,然后使用Javascript / jQuery执行ajax请求,从“产品页面”中提取文本和数据,然后在“产品列表”页面上显示这些内容。同样,这些“产品页面”的URL有时会带有双引号。

Moving on, these ajax requests are called via a function and the data obtained is returned and utilized by a callback. These functions have worked great until recently when we discovered that " (double quotes) are breaking the functions. These double quotes are being passed in the url variable to these AJAX requests. I have read a bunch of other posts mentioning quotes breaking their scripts, but many have found solutions, and I have not been able to.

接下来,通过函数调用这些ajax请求,并通过回调返回并使用获得的数据。直到最近,当我们发现“(双引号)打破函数时,这些函数运行良好。这些双引号在url变量中传递给这些AJAX请求。我已经读过一些其他帖子提到引用它们的脚本,但是很多人找到了解决方案,而我却无法解决。

I even tried var href = encodeURI( $(this).text() ); and var href = encodeURIComponent( $(this).text() );. These don't seem to fix the issue. Before I go on, let me show you my script.

我甚至尝试过var href = encodeURI($(this).text());和var href = encodeURIComponent($(this).text());.这些似乎没有解决问题。在我继续之前,让我告诉你我的剧本。

XML

<Worksheet ss:Name="Recommended">
<Table ss:ExpandedColumnCount="1" ss:ExpandedRowCount="5" x:FullColumns="1"
 x:FullRows="1" ss:DefaultRowHeight="15">
 <Column ss:AutoFitWidth="0" ss:Width="96.75"/>
 <Row ss:AutoFitHeight="0">
  <Cell><Data ss:Type="String">/2U-12&quot;-Economy-Rack-Shelf-KH-3000100202/</Data></Cell>
 </Row>
</Table>
</Worksheet>

$(this).find('Data').each(function(){

  var href = $(this).text();

  // This is where the 'url' is getting it's value from the 'href' variable
  // that is being pulled from the XML file 'Data'
  getProductData('name', href, function(val) {

    console.log(val);

  });

});

// Get data from the product page anywhere (Global)
function getProductData(type, url, callBack) {

  $.ajax({
    url: url,
    method: 'GET',
    dataType: 'html',
    success: function(data){

      var $data = $(data).find('#product-data');

      var val = $data.data(type);

      return callBack( val );

    },
    error: function(data) {
      console.error( 'getProductData: ' + type + ' = FAIL / URL: ' + url );
    }
  });

}

HTML

<input type="hidden" id="product-data" data-name="{product['product_name']}">

Any ideas on how I can get these double quotes to work with my script? It seems there is very little on the subject available... I haven't had this issue in all my years in development :(

关于如何使用这些双引号来处理我的脚本的任何想法?这个问题似乎很少......我在发展的这些年里没有遇到过这个问题:(

I just cannot get the quotes (that are actually coded as " in the XML file) to encode properly when the AJAX request uses this string as the url parameter...

当AJAX请求使用此字符串作为url参数时,我无法获取引号(实际上编码为“在XML文件中”)以正确编码...

The outcome of the above is my getProductData() simply does not return anything. This same function returns data just fine when the url variable does not contain double quotes in the string...

以上结果是我的getProductData()根本不返回任何内容。当url变量在字符串中不包含双引号时,同样的函数返回数据就好了...

EDIT

I have also tried var href = $(this).text().replace('"', '\"'); btw.

我也试过var href = $(this).text()。replace('“','\”');顺便说一句。

EDIT So I mis-diagnosed my issue. The AJAX requests were working, the values being returned were just corrupted by the quotes. So, the issue was that the quotes made attributes break apart in my HTML, the AJAX requests were doing okay.

编辑所以我错误地诊断了我的问题。 AJAX请求正在运行,返回的值只是被引号破坏了。所以,问题是引号使我的HTML中的属性分裂,AJAX请求正常。

I am renaming the post to better label the issue I was having. Sometimes, it's the most basic things that break our stuff right?

我正在重新命名帖子以更好地标记我遇到的问题。有时,这是打破我们的东西的最基本的东西吗?

2 个解决方案

#1

You can't put strings with double quotes inside an attribute that is itself enclosed by double quotes. While I do not know what technology you're using to set the value of the data-name attribute, whatever you're using must convert the double quote to ". In PHP you would use the htmlspecialchars function. With JavaScript you could use .replace(/"/g,"&quot");

您不能将带双引号的字符串放在由双引号括起来的属性中。虽然我不知道您使用什么技术来设置data-name属性的值,但无论您使用什么,都必须将双引号转换为“。在PHP中,您将使用htmlspecialchars函数。使用JavaScript,您可以使用.replace(/“/ g,”"“);

The end result should look like this

最终结果应如下所示

<input type="hidden" id="product-data" data-name="2U-12&quot;-Economy-Rack-Shelf-KH-3000100202"

#2

So ultimately what I had to do was:

所以最终我要做的是:

Change the the double quotes in my HTML to single quotes

将HTML中的双引号更改为单引号

Use var href = encodeURI( $(this).text() ); when passing the href variable to getProductData()

使用var href = encodeURI($(this).text());将href变量传递给getProductData()时

I could have also used .replace('"', '&quote') on the data-name value to resolve the issue as well, but I don't like using javascript unless absolutely necessary... It would be cleaner IMo, but yeah...

我也可以在数据名称值上使用.replace('“','&quote')来解决问题,但我不喜欢使用javascript,除非绝对必要......这将是更清洁的IMo,但是啊...

#1