从 textarea 获取原始文本答案

【问题标题】：get raw text from textarea从 textarea 获取原始文本
【发布时间】：2019-08-22 21:56:04
【问题描述】：

我想从 texarea 获取原始文本，我的意思是不转换 unicode 值，例如：

let textArea=document.querySelector("textarea");
let value=textArea.value;
let valueSpan=document.querySelector(".value .text")
let valueinnerHTML=document.querySelector(".innerHTML .text");
console.log(value);
console.log(textArea.innerHTML);
valueSpan.textContent =value;
valueinnerHTML.textContent=textArea.innerHTML;

.wrapper{

  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
}
.test{
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 3px;
}

<textarea class="hide">
Unicode: &#128036;
Icon:  ????  
</textarea>
<div class="wrapper">
  <div class="value test">
   <h3> Value</h3>
    <span class="text"></span>
  </div>
  <div class="innerHTML test">
   <h3> InnerHTML</h3>
    <span class="text"></span>
  </div>
</div>

我想得到原始文本，所以当我得到文本区域值时，我得到“🐤”而不是????

【问题讨论】：

你试过innerHTML而不是value吗？
如果您想在某人输入字符后获取<textarea> 的值，您唯一的选择是获取该值作为字符串。 innerHTML 方法仅适用于页面加载时出现的内容。
@Taplar 它不起作用，请参阅更新后的问题
在 Firefox 中 innerHTML 为您提供内容，.textContent 也为您提供内容，但 HTML 实体已被解析以构建浏览器在文本节点中文本的内部表示.我猜，有些浏览器可能会决定为某些代码点返回一个或多个实体。
@Pointy 是正确的。浏览器已经解析了 HTML 并将其转换为 DOM 元素，您无法使用原始表示。这听起来像XY problem。 为什么你需要“原始文本”？你想解决什么问题？

标签： javascript html unicode

【解决方案1】：

使用“?”.codePointAt(0) 将返回“128036”。如果您想了解它，请查看this。

let value=document.querySelector("textarea").value
let span=document.querySelector("span");
span.textContent =value.codePointAt(0);

 <textarea class="hide">
?

</textarea>
<span></span>

【讨论】：

这不是我想要的，我想在不转换 unicode 的情况下获取整个原始文本值

【解决方案2】：

使用 Unicode 表示“&”以显示 uni-code

2 8 0 3 6;显示 & # 1 2 8 0 3 6;

let textArea=document.querySelector("textarea");
let value=textArea.value;
let valueSpan=document.querySelector(".value .text")
let valueinnerHTML=document.querySelector(".innerHTML .text");
console.log(value);
console.log(textArea.innerHTML);
valueSpan.textContent =value;
valueinnerHTML.textContent=textArea.innerHTML;

.wrapper{

  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
}
.test{
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 3px;
}

<textarea class="hide">
Unicode: &#38;#128036;
Icon:  ?  
</textarea>
<div class="wrapper">
  <div class="value test">
   <h3> Value</h3>
    <span class="text"></span>
  </div>
  <div class="innerHTML test">
   <h3> InnerHTML</h3>
    <span class="text"></span>
  </div>
</div>

【讨论】：

【解决方案3】：

🐤

使用 Unicode 表示 &。

【讨论】：