如何将包含 HTML 的字符串传递给 onClick 事件？

Question

我正在我的 c# 代码中创建一个元素，其中包含一个将字符串参数复制到剪贴板的 onclick 事件。

它工作正常，问题是当我必须传递一个 HTML 代码的参数时，带有
和标签。它破坏了我的页面，因为可能会出现引号 (')（如样式和 colspan 标签）。

我使用的代码是这样的：

string comment = row.Cells[1].Text;

Cells[0].Text += "<br/><a href='javascript:' onclick='javascript:CopyComment(" + comment + ")'>COPY</a>";

如何传递带有 HTML 作为参数的字符串而不破坏我的页面？

编辑 1：

这是我作为参数传递的 HTML 代码：

> "<span style='color:#FF0000;'><b>COTAÇÃO</b></span><br />\r\n<br
> />\r\n<br />\r\nAssunto: Cotação / Assistência: 425595 / Placa:
> EAL8426<br />\r\n<br />\r\nSegue conforme solicitado:<br />\r\n<br
> />\r\n<span
> style='text-decoration:underline;'><b>ORIGEM:</b></span><br />\r\nRua
> Glauber Rocha, 39 - Jardim Alzira, São Paulo - SP, 03986-270, Brasil,
> 39<br />\r\n<br />\r\n<span
> style='text-decoration:underline;'><b>DESTINO:</b></span><br />\r\nR.
> Conselheiro Saraiva, 36 - Santana, São Paulo - SP, Brasil, 36<br
> />\r\n<br />\r\n<br />\r\n<b>Cotação 1</b><br />\r\nTempo de Chegada:
> 50<br />\r\n<br
> />\r\n<table>\r\n<tr>\r\n<td>Tarifa</td><td>Valor</td><td>Quantidade</td><td>Total</td>\r\n</tr>\r\n<tr>\r\n<td>Saída</td><td>R$
> 99,00</td><td>1</td><td>R$ 99,00</td>\r\n</tr>\r\n<tr>\r\n<td>KM
> (Excedente)</td><td>R$ 1,50</td><td>10</td><td>R$
> 15,00</td>\r\n</tr>\r\n<tr>\r\n<td>Pedágio</td><td>R$
> 20,00</td><td>1</td><td>R$ 20,00</td>\r\n</tr>\r\n<tr>\r\n<td>Horas
> Trabalhadas</td><td>R$ 46,00</td><td>2</td><td>R$
> 92,00</td>\r\n</tr>\r\n<tr>\r\n<td>KM (Deslocamento)</td><td>R$
> 1,50</td><td>10</td><td>R$
> 15,00</td>\r\n</tr>\r\n<tr>\r\n<td>Destombamento</td><td>R$
> 125,00</td><td>1</td><td>R$ 125,00</td>\r\n</tr>\r\n<tr>\r\n<td
> colspan='2'>&nbsp;</td><td>Total</td><td>366,00</td>\r\n</tr>\r\n</table>\r\n<br
> />\r\n\r\n<br />\r\nNo aguardo<br />\r\n<br />\r\nAtenciosamente\r\n"

这是我的 javascript 函数，用于将文本（HTML 格式）复制到剪贴板

function CopiarComentario(html) {
    var tmpEl;
    tmpEl = document.createElement("div");

    // since we remove the element immediately we'd actually not have to style it - but IE 11 prompts us to confirm the clipboard interaction and until you click the confirm button, the element would show. so: still extra stuff for IE, as usual.
    tmpEl.style.opacity = 0;
    tmpEl.style.position = "absolute";
    tmpEl.style.pointerEvents = "none";
    tmpEl.style.zIndex = -1;

    // fill it with your HTML
    tmpEl.innerHTML = decodeHtml(html);

    // append the temporary node to the DOM
    document.body.appendChild(tmpEl);

    // select the newly added node
    var range = document.createRange();
    range.selectNode(tmpEl);
    window.getSelection().addRange(range);

    // copy
    document.execCommand("copy");

    // and remove the element immediately
    document.body.removeChild(tmpEl);
}

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

Answer 1

Cells[0].Text += "<br/><a href='javascript:' onclick='javascript:CopyComment(" + HttpUtility.HtmlEncode(comment) + ")'>COPY</a>";

Read more about HttpUtility.HtmlEncode here.