如何在字符串中包含撇号，以便使用Jquery在工具提示中显示？

Question

我有一个文本或字符串内的‘数据’variableSome文本有撇号在it.The工具提示不显示文本后的撇号符号。如何在工具提示中包含所有文本(包括撇号和特殊字符

  function hoverPopup(currentElement){
   
    $('[data-toggle="tooltip"]').tooltip({ placement: 'top'});
    $(".tooltip").remove();
    var data = currentElement.attr('data-comment');
    var tooltipHtml = "<table style='max-width:fit-content !important;font- 
    size:10px;border-collapse: unset;background-color:#ddd;border- 
    radius:3px;margin:1px;align:center;'>"; 
    tooltipHtml += "<tr><td class='center-cell' style='max-width:200px;background- 
    color:white;'>"+data+"</td></tr>";
    tooltipHtml += "</table>";
    currentElement.attr('data-original-title',tooltipHtml);
    currentElement.tooltip('show');
  
 }

假设数据变量具有

Lorem Ipsum只是印刷和排版工业的虚拟文本。自15世纪以来，Lorem Ipsum一直是印刷和排版行业的标准虚拟文本。当时，一家未知的印刷商将一条排字槽拿出来，然后把它弄成一本打字样书。它不仅存活了五个世纪，而且在进入电子排版后基本上保持不变。它在20世纪60年代流行起来，当时发布了包含Lorem Ipsum段落的Letraset sheets，最近又出现了包括Lorem Ipsum版本的台式排版软件，如Aldus PageMaker。作为文本。

只有"Lorem Ipsum是印刷和排版行业的虚拟文本。Lorem Ipsum一直是行业“显示在工具提示中。撇号后的文本将被截断。我希望字符串的其余部分也显示在使用hoverpopup功能的工具提示内

Answer 1

您的代码没有显示问题，但本身有很多问题。

首先打印数据的值(例如，在第五行之后添加console.log( data ))，以查看它在该点是否已经损坏。

此外，避免将HTML代码片段构造为字符串，您应该重构tooltipHtml结构。

另外，从标记属性(data-comment)中提取原始字符串并将其插入到同一标记的另一个属性(data-original-title)中，这不是一种好的做法，因为读写DOM需要大量资源。

最后，在属性中写入格式化的超文本标记语言可能会导致数据丢失，因为字符串已被净化(由jQuery或DOM本身)。

Answer 2

您可能需要转义撇号。您可以使用.replace(/'\\/g,"\\'") by来执行此操作；

  function hoverPopup(currentElement){
   
    $('[data-toggle="tooltip"]').tooltip({ placement: 'top'});
    $(".tooltip").remove();
    var data = currentElement.attr('data-comment');
    var tooltipHtml = "<table style='max-width:fit-content !important;font-size:10px;border-collapse: unset;background-color:#ddd;border- radius:3px;margin:1px;align:center;'>"; 
    tooltipHtml += "<tr><td class='center-cell' style='max-width:200px;background-color:white;'>"+data.replace(/'\\/g,"\\'")+"</td></tr>";
    tooltipHtml += "</table>";
    currentElement.attr('data-original-title',tooltipHtml);
    currentElement.tooltip('show');
  
 }

只需注意，只有当data变量包含'时，这才会起作用。

如果包含"，它将无法对其进行转义。

但是，如果不能看到您的代码(HTML等)和正在使用的变量等，就很难真正诊断问题。