胸腺叶逃逸特征

Question

我想把JavaScript onClick属性使用Thym立叶。

我这样写代码

<button class="btn btn-sm btn-light" data-toggle="tooltip"
  th:attr="onclick=|showCartItemRemoveModal('${purchase.lineItemId}' , '${purchase.productName}')|"
  title="Delete from cart">

此代码正在运行。当productName包含这样的特殊字符时，我会遇到问题

productName = "Test Product's"

然后JavaScript函数看起来像这样

onclick="showCartItemRemoveModal('184a4c6h776' , '"Test Product's"')"

我需要从产品名称中转义双引号和单引号字符。我该怎么做？

Answer 1

要回答有关转义文本的特定问题，请执行以下操作：

如果您希望JavaScript函数包含以下文本，其中单引号正确转义。。。

onclick="showCartItemRemoveModal('184a4c6h776' , 'Test Product\'s')"

...然后需要在Java字符串中提供该字符。要在这样的Java字符串中包含一个反斜杠，您需要使用两个反斜杠，因为单个反斜杠在Java中对于特定的字符转义序列已经有了特殊的意义*。

这同样适用于字符串中的双引号。

在这些情况下，Java中的\\将导致JavaScript中的单个\-这就是您想要的。您已经转义了Java转义字符-将其转换为常规\。

因此，在Java中：

String s = "Test Product\\'s";

尽管如此，在我看来，mplungian在他们的回答中建议的方法是正确的。

*请参阅本教程中的“转义序列”部分。碰巧你的\'是Java的有效转义序列之一，所以它实际上并不意味着一个文字反斜杠后跟一个文字单引号。

Answer 2

我不知道thymeleaf，但我强烈建议类似的东西

<button class="btn btn-sm btn-light" data-toggle="tooltip"
data-itemid="${purchase.lineItemId}" data-productname="${purchase.productName}"
title="Delete from cart">

然后从最近的静态容器中委托，我在这里称为someContainer

 document.getElementById("someContainer").addEventListener("click",e => {
   const tgt = e.target;
   if (e.dataset.itemid) {
     showCartItemRemoveModal(e.target)
   }
 })

在showCartItemRemoveModal中，您可以执行以下操作

const showCartItemRemoveModal = tgt => {
  console.log(tgt.dataset.itemid,tgt.dataset.productname)
};

Answer 3

还有另一种方法

而不是在javascript函数中将产品名称作为参数传递。。您可以在按钮标记中添加一个数据变量作为自定义属性，并使用jquery或javascript获取自定义属性的值。代码如下所示。。

HTML代码：

<button class="btn btn-sm btn-light" data-toggle="tooltip"
th:id="${purchase.lineItemId}" th:data-productname="${purchase.productName}"
th:attr="onclick=|showCartItemRemoveModal('${purchase.lineItemId}')|"
title="Delete from cart">

Javascript函数代码

function showCartItemRemoveModal(lineItemId) {
   var productName = $("#lineItemId").attr("data-productname");
   console.log("product Name is: "+productName );
}