javascript - 如何将 HTML 作为字符串传递到 TextArea

标签 javascript jquery html

我正在尝试获取用户使用属性 contenteditable="true" 编辑的表格,但我不希望它出现在输出中。

所以为了输出我正在这样做:

$(document).ready(function() { 
  $("#btn").click(function(){
    var text = $("#tab").html(); // taking the content
    var res = text.replace('<td contenteditable="true">','<td>'); //trying to replace   
    document.getElementById("output").innerHTML = res ; //output data
  });
});

问题是代码忽略了替换,你知道为什么吗?

==== 编辑:

抱歉大家,我想我根本就不清楚。唯一的问题是输出,而不是 html,我将 html 传递到文本区域给用户副本等。

请看一下这里的代码:https://jsfiddle.net/mnpxwhx6/

当我执行输出时,我不希望 TD 带有可编辑属性。

谢谢

最佳答案

如果正确解释问题,.replace()没有必要 ?如果你想删除contenteditable属性位于 td您可以克隆的元素 #tab元素使用 .removeAttr() 删除 contenteditable来自htmltd设置之前的元素htmltextarea

textarea {
  width: 400px;
  height: 400px;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn").click(function() {
        var text = $("#tab").clone();
        text.find("td[contenteditable]").each(function() {
          $(this).removeAttr("contenteditable")
        })
        document.getElementById("output").innerHTML = text[0].innerHTML;
      });
      delete text;
    });
  </script>
</head>

<body>

  <div id="tab">
    <table border=1>
      <thead>
        <tr>
          <td></td>
          <td contenteditable="true">
            48-50
          </td>
          <td contenteditable="true">
            50-52
          </td>
          <td contenteditable="true">
            52-54
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>medida1</th>
          <td contenteditable="true">
            104cm
          </td>
          <td contenteditable="true">
            108cm
          </td>
          <td contenteditable="true">
            112cm
          </td>
        </tr>
        <tr>
          <th>medida2</th>
          <td contenteditable="true">
            106cm
          </td>
          <td contenteditable="true">
            110cm
          </td>
          <td contenteditable="true">
            114cm
          </td>
        </tr>
        <tr>
          <th>medida3</th>
          <td contenteditable="true">
            122cm
          </td>
          <td contenteditable="true">
            126cm
          </td>
          <td contenteditable="true">
            130cm
          </td>
        </tr>
        <tr>
          <th>medida4</th>
          <td contenteditable="true">
            69cm
          </td>
          <td contenteditable="true">
            70cm
          </td>
          <td contenteditable="true">
            71cm
          </td>
        </tr>
        <tr>
          <th>medida5</th>
          <td contenteditable="true">
            38cm
          </td>
          <td contenteditable="true">
            40cm
          </td>
          <td contenteditable="true">
            42cm
          </td>
        </tr>
      </tbody>
    </table>

  </div>

  <button id="btn">Show HTML</button>
  <hr>

  <textarea id="output" rows="4" cols="50">

  </textarea>

jsfiddle https://jsfiddle.net/mnpxwhx6/1/

关于javascript - 如何将 HTML 作为字符串传递到 TextArea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36227651/

相关文章:

javascript - 从选择中创建复选框列表弹出窗口

javascript - 为什么 splice 在 JavaScript 中会删除前面的一个数字?

javascript - 将包含 HTML 实体的 JSON 序列化字符串转换为对象

带有数组索引的 PHP 发布表单

html - IE6 中 CSS 图像背景上的额外白色边框

javascript - JSON.解析 : unexpected character at line 1 column 1 of the JSON data

javascript - Redux 中的选择器 - React 组件了解 redux 状态意味着什么?

Javascript/jQuery - 检测浏览器高度 - 简单修复?

javascript - jQuery 到 Javascript 添加必需的属性

javascript - for 循环中的奇怪行为,语句不执行