javascript - href 中的 Contenteditable/jQuery 符号

Question

我构建了一个在 iframe 中运行的小型所见即所得编辑器。
我使用 jQuery 插入链接并像这样设置它的 href:

$link.attr("href", url);

后来我得到了 iframe 的源并将它保存到 MySQL 数据库中。

我的问题:
当我插入带有符号的链接时，例如http://www.example.org?foo=bar&bar=foo浏览器将其转换为 http://www.example.org?foo=bar&bar=foo .
然后，当我获得源代码时，链接包含 html 实体 &而不是简单的符号 & .

旁注:我正在进一步处理链接，所以我实际上需要真实链接，不能接受 html 编码的符号。

两个问题:

1. 有没有办法插入链接而不用浏览器将其转换为 html 实体？
2. 如果这不可能，我必须稍后替换那些出现的字符，我应该对哪些其他字符进行 html_decode？

Answer 1

这是 HTML 客户端中的有效行为 — 如果您需要在没有 HTML 编码的情况下将所有链接返回到服务器，我建议进行后处理。执行此操作的最佳方法是通过获取每个链接的 href，将其作为 HTML 粘贴到 DOM 节点，然后将其作为文本读回，从而使用对您有利的相同 native DOM 编码。

在发送回服务器之前:

// The string you'll send back to the server
var iframeContentString;
// The contents of the iframe as HTML
var $iframeContents = $iframe.find( 'body' ).clone();
// A list of all hrefs
var anchorHrefs     = [];
// An empty node to use for HTML decoding using native methods
var $emptyNode      = $( 'x' );

// For each link, decode the href and store
$iframeContents.find( 'a' ).each( function storeDecodedHref( element ){
  // Assign the anchor's href to the empty node as HTML
  $emptyNode.html( element.href );

  // Store it as text
  anchorHrefs.push( $emptyNode.text() );

  // Replace the href with a string we can find with Regexp
  element.href = '@REPLACED@';
} );

// Store the href-free content as a string
iframeContentString = $iframeContents.html();

// Replace our Regexp flag with the saved link
iframeContentString.replace( /href="@REPLACED@"/g, function injectDecodedHref(){
  return anchorHrefs.unshift();
} );

这似乎有点过度设计，但那是因为我正在使用(jQuery 包装器)浏览器自己可靠的 DOM 读取/编码/解码 API — 与首先对 href 进行编码的 API — 并修改然后为简单的 Regexp 解析 DOM 内容，而不是沿着危险的路线尝试解析 Regexp 中的 href 属性(never attempt to parse HTML with Regexp!)。

我是在没有测试的情况下临时写的，但希望评论能帮助您阅读它作为指南并将其应用于您的具体情况。

希望这能奏效!