将html代码存储在data属性中 - Store html code inside data attribute

Store html code inside data attribute

本文关键字：data 属性存储 html 代码 | 更新日期: 2023-09-27

我需要能够将格式化的HTML存储在data属性中，以便以后由jQuery以两种格式拾取:

在PHP中，我像这样存储HTML:

echo '<li data-desc="'. htmlspecialchars($myHTMLdescription) .'" class="myTerm">'. stripslashes($myItem) .'</li>';

之后我使用JS来获取值:

$(document).on('click', '.myTerm', function() {
    var thisTerm    = $(this).text();
    var description = $(this).attr('data-desc');
    var descNoHTML = description.text();
});

descNoHTML似乎是破坏代码，如果有HTML元素，如文本中的链接。

使用js解码编码字符串

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}
$(document).on('click', '.myTerm', function() {
    var thisTerm    = $(this).text();
    var description = $(this).attr('data-desc');
    description  = decodeEntities(description );
    var descNoHTML = description.text();
});

在直接问任何问题之前，你应该试着搜索相同的问题。也许你的问题有答案了。我认为这个链接对你有帮助。

htmlspecialchars用于转义HTML主体部分中的字符。例如，"<"、">"、"&"是HTML中的特殊字符。它们可以分别转义为<、>和&。

属性的双引号是完全不同的环境。<>&不是特殊字符。唯一的特殊字符是"。参见https://www.w3.org/TR/html-markup/syntax.html#syntax-attributes。实际上，直到现在我才意识到你不能转义双引号，但这是规范所说的。因此，如果您想正确地完成它，您必须使用您选择的编码自己转义它们，然后在读取属性时取消转义。

我们不能将'"用于"，因为"根本不允许。让我们将"编码为%q。那么%是一个特殊字符，所以我们将其编码为%p。这一行PHP代码变成:

$myEscapedHTMLdescription = str_replace(array('%', '"'), array('%p', '%q'), $myHTMLdescription);
echo '<li data-desc="'. $myEscapedHTMLdescription .'" class="myTerm">'. stripslashes($myItem) .'</li>';

参见http://php.net/manual/en/function.str-replace.php。然后在javascript中你必须解码它:

var description = $(this).attr('data-desc')
    .replace(/%q/g, '"')
    .replace(/%p/g, '%');

这大部分是未经测试的(我这里没有安装PHP)，所以可能有拼写错误。

try:

var descNoHTML = $(description).text();