javascript textarea createTextNode（）

Question

我想使用createTextNode（）方法转义从textarea中取出的字符串。将TextNode附加到textarea不起作用。

function myFunc(){
    var str = document.getElementById("tarea").value;
    var chld = document.createTextNode(str); 
    var prnt = document.getElementById("tarea");
    prnt.appendChild(chld);
}

Answer 1

如果您希望浏览器为您执行转义工作，我可能会使用临时元素，然后使用其innerHTML作为createTextNode的参数：

＆＃13;

＆＃13;

function myFunc(){
  var prnt = document.getElementById("tarea");
  var str = prnt.value;
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  prnt.appendChild(document.createTextNode(div.innerHTML));
}
myFunc();

＆＃13;

<textarea id="tarea">Testing & < ></textarea>

＆＃13;

＆＃13;

＆＃13;

但最低限度地逃避HTML非常简单，你不一定需要全力以赴：

str = str.replace(/&/g, "&amp;").replace(/</g, "&lt;");

（不需要>，如果你不在标签内，它会很好。）

E.g：

＆＃13;

＆＃13;

function myFunc(){
  var prnt = document.getElementById("tarea");
  var str = prnt.value;
  str = str.replace(/&/g, "&amp;").replace(/</g, "&lt;");
  prnt.appendChild(document.createTextNode(str));
}
myFunc();

＆＃13;

<textarea id="tarea">Testing & < ></textarea>

＆＃13;

＆＃13;

＆＃13;

---

请注意，这两个追加，因为这是您的代码尝试做的事情;他们不会替换 textarea的内容。如果您想这样做，请在附加文本节点之前将其value设置为""。