Question

我有一个包含HTML的表格单元格，例如

    <td id="test">something&trade; is here</td>

我有一个输入字段，我想用它来编辑表格单元格中的HTML，例如，

    <input type="text" id="editor" value="">

我需要从表格单元格中获取字符串 something™ is here ，以便我可以将其放入<input>进行编辑。我试过了

    var txt=$("#test").text();
    var htm=$("#test").html();

他们两个都在回归＆＃34; 某事™在这里＆＃34;而不是原始的HTML - 我在设置两个测试值之后立即在Firebug中有一个断点，这就是我所看到的。

阅读jQuery documentation，我真的希望.html()方法能够返回我正在寻找的原始HTML，但事实并非如此。

我知道Javascript没有像PHP htmlspecialchars()函数那样的编码器，我必须解决这个问题，但所有这四个操作都会产生相同的结果：

    var enchtm=$("<div/>").text(htm).html();
    var enctxt=$("<div/>").text(txt).html();
    var htmenc=$("<div/>").html(htm).text();
    var txtenc=$("<div/>").html(txt).text();

每次发生都会使＆＃34; 某事™在这里＆＃34;在editfield中，而不是原始HTML。

如何从表格单元格中将字符串 something™ is here 导入<input>，以便我可以对其进行编辑？

Answer 1

它不存在。在生成DOM之前对实体进行解码，id date value id date ----------- ---------- --------------------------------------- ----------- ---------- 1 2002-12-31 0.70 1 2002-11-30 1 2003-01-31 9.00 1 2002-11-30 2 2002-12-31 0.70 NULL NULL 2 2003-11-30 0.10 NULL NULL（实际上只是.html()属性的包装器）不会对其进行重新编码，因为没有理由对它进行重新编码to - innerHTML与HTML something™的表示完全一样有效。没有＆＃34;完全原始＆＃34;浏览器提供的HTML的（字符前解码）视图。

建议：提供初始值作为输入的something™属性，而不是将其作为div的内容，这样数据流总是单向的，而这个问题并不是发生。

Answer 2

正如其他答案所表明的那样，我试图做的事实上是不可能的 - 用于填充表格单元格的原始HTML源代码在写入DOM文档时不再存在于浏览器中。

我解决这个问题的方法是在表格单元格上使用title属性，例如，

    // in the PHP/HTML source document
    <?php $text='something&trade; is here'; // the contents of the table cell ?>
    <td id="test" title="<?php echo htmlspecialchars($text) ?>"><?php echo $text ?></td>

现在Javascript相对简单：

    $("#editor").val($("#test").attr("title"));

这个问题是这些表格单元格中的一些应该有工具提示 - 它们使用title属性 - 而有些则不是。幸运的是，可能包含需要编辑的HTML的表格单元格永远不需要显示工具提示，显示工具提示的表格单元格可以使用.text()方法检索简单文本。我可以在需要工具提示的单元格上设置一个类属性，例如，

    <td class="tooltipped" title="This is a tooltip">Hover here!</td>

然后，我可以使用jQuery的.not()方法来抑制单元格上的工具提示，标题用于存储编码的HTML：

    // suppress browser's default tooltip on td titles
    $("td[title]").not(".tooltipped").mouseover(function()
    {   var elem=$(this);
        elem.data("title",elem.attr("title"));
        // Using null here wouldn't work in IE, but empty string does
        elem.attr("title","");
    }).mouseout(function()
    {   var elem=$(this);
        elem.attr("title",elem.data("title"));
    });

Answer 3

Javascript有escape功能但在这种情况下它不会帮助你，我只是为你做了一个技巧，但留下来得到最佳答案。

var htm = $("#test").html().replace(/™/g, '&trade;');
$('#editor').val(htm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
<td id="test">something&trade; is here</td>
  </tr>
</table>

<input type="text" id="editor" value="">

Answer 4

我不认为您能够获得确切的值，因为html解析文档并在浏览器上显示它，我不知道任何有助于查找确切内容的关键字或库元件。但是在这种情况下你会使用Ajax并以字符串格式获取文件的所有内容以获得确切的值。

var client = new XMLHttpRequest();
client.open('GET', './file.html'); // get the file by location
client.onreadystatechange = function() {
  if (client.readyState === 4) {
    if (client.status === 200) { // when the file is ready
      var file_contents = (client.responseText); // the whole file is stored in the string format in the variable
      get_value(file_contents); // function get_value fetches the exact value

    }
  }
}

client.send();

function(str_file) {
  var indextest = str_file.indexOf("test"); // fetches the index of test
  var indexclosing = str_file.indexOf("</td>"); // fetches the index of closing td tag
  var td_content = "";
  var condition = false;

  for (var i = indextest; i < indexclosing; i++) {
    if (str_file.charAt(i - 1) == ">") {
      condition = true; // the condition is true when the previous character is '>'
    }
    if (condition) { // when the condition is true start storing the value in the td_content element
      td_content += str_file.charAt(i);
    }
  };
  console.log(td_content) // display it

};

如何使用jQuery获取td中包含的HTML？

4 个答案: