Question

我将某些子节点另存为Base64。这是为了使传递一组元素（节点）更加容易，最终将base64字符串保存到数据库中，并希望将其读回原始HTML元素（节点）

我正在使用atob()和btoa() https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

我不知道如何无法重用此base64。我知道如何将其转换回HTML。

在我的应用程序中，当用户保存（单击按钮）时，它使用btoa保存了HTML元素（和子元素），我得到了看起来很“有趣”的字符串。

现在，我需要将其从字符串重新加载到HTML可以理解的内容中，以便在GUI中显示。

我使用atob(myString)并得到HTMLDivElement

我不知道该如何使用。这意味着以下操作失败

我的努力是（而且这可能不会在IE中起作用）

  const wrapperEle = document.getElementById("wrapper");
  const destinationEle = document.getElementById("destination");
  const btn = document.getElementById("button");

  btn.addEventListener("click", performLogic);

  function performLogic() {

      destinationEle.innerHTML = null;

      const myString = btoa(wrapperEle); //encode
      const data = atob(myString);       //decode

        try {
            const node = document.createElement(data);
            destination.appendChild(node);
        } catch (e){
            alert("Failed on first effort");
        }

        try {
            destination.append(data); //appends [object HTMLDivElement]
            alert("second attempt complete");
        } catch  (e){
            alert("Failed on second effort");
        }

        try {
            destination = data; //appends [object HTMLDivELement]
            alert("third attempt complete but nothing shows");
        } catch  (e){
            alert("Failed on third effort");
        }

        try {
            destination.append(myString); //appends [object HTMLDivELement]
            alert("fourth attempt complete but nothing shows");
        } catch  (e){
            alert("Failed on fourth effort");
        }
    }

<div id="wrapper">
<table>
<tr>
  <td>data 01</td>
  <td>data 02</td>
</tr>
</table>
</div>

<input type="button" id="button" value="Click" />

<div id="destination">
I want and expect this line of text to be replaced with the table content above after you click on the button
</div>

如何重新使用已编码和解码的值？理想情况下，没有JQuery或任何框架，只有Java

我也添加了JS，但是它在IE中不起作用（很好）。

https://jsfiddle.net/uLb8okrs/2/

Answer 1

您正在尝试选择，编码，解码然后附加一个Element，这比您要实现的目标要复杂得多。相反，只需通过outerHTML属性获取要“复制”的元素的HTML，然后编码，解码并替换目标div的HTML。

例如：

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');

const performLogic = () => {
  let encoded = btoa(wrapper.outerHTML); //encoded HTML
  let decoded = atob(encoded); // decoded HTML
  destination.innerHTML = decoded;
}

button.addEventListener('click', performLogic);

<div id="wrapper">
  <table>
    <tr>
      <td>data 01</td>
      <td>data 02</td>
    </tr>
  </table>
</div>

<input type="button" id="button" value="Click">

<div id="destination">
  I want and expect this line of text to be replaced with the table content above after you click on the button
</div>

Answer 2

您正在尝试对=AGGREGATE(15,6,$B$2:$C$1000/($A$2:$A$1000=G9),ROW(1:1))元素进行编码，这就是为什么获得DOM的原因。

您应该做的是获取源元素的HTMLDivElement，然后innerHTML，然后将其保存到数据库或任何您想要的位置，然后再次encode并将其设置为再次decode个目标元素。

就这么简单。在代码段中添加了注释，以尽可能地清除步骤。

也请注意，innerHTML的控制台输出在编码后，发现它与在编码myString（不是字符串）后发现的控制台输出有何不同

注意：如果您也想要element元素，请使用#wrapper作为outerHTML的答案。

benvc

const wrapperEle = document.getElementById("wrapper");
const destinationEle = document.getElementById("destination");
const btn = document.getElementById("button");

btn.addEventListener("click", performLogic);

function performLogic() {
  destinationEle.innerHTML = null;
  let myString = btoa(wrapperEle.innerHTML); //encode /// and take the innerHTML of it to parse, not the DOM itself
  console.log(myString); // check now what it looks like, or save it in database or wherever you want.
  let data = atob(myString); //decode /// again, after decoding you just get the string type data, not a DOM type
  destinationEle.innerHTML = data; // so, now you can set the string as an innerHTML to the target element
}

Answer 3

您遇到的问题与以下事实有关：在许多框架中，与appendChild不同的是，appendChild不接受字符串作为有效参数，而atob则返回给定字符串如; appendChild仅接受Node对象作为有效参数（有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append）

因此，根据需要执行此操作，您有2个选项：

1）必须首先将解密后的字符串转换为节点对象，然后调用appendChild

const data = atob(myString);    
var node = document.createElement(data);
myHtmlElement.appendChild(node);

2）只需使用append代替appendChild

const data = atob(myString);    
myHtmlElement.append(node);

注意：append在IE中不起作用

如何使用Base64编码HTMLTableSectionElement并附加解码后的值

3 个答案: