Question

我正要创建一个基于JavaScript的小工具，用于快速生成带有或不带有特殊字符的随机字符串，我发现了一个不错的代码段，这极大地启发了我：（https://stackoverflow.com/a/52464491/11689422）：

function randStr(len) {
  let s = '';
  while (len--) s += String.fromCodePoint(Math.floor(Math.random() * (126 - 33) + 33));
  return s;
}

// usage
console.log(randStr(32));

这是工作的一部分，当我也想要带有特殊字符的字母数字字符串时，但是当我尝试将其嵌入到HTML页面中时，有时（实际上，很频繁），结果字符串是随机的比预定义的长度短。可以，但是在JS中调试时（字符串的长度正确），但是在html页面（使用.innerHTML方法显示的页面上却不是）上可以。我也尝试使用以下代码，但问题是相同的：

function makeid(length) {
   var result           = '';
   var characters       = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&_-+=`|(){}[]:;\"'<>,.?/";
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}

console.log(makeid(32));

有人知道解决方案吗？

Answer 1

在某些情况下，您的文本不是有效的HTML，

innerHTML可能会产生意外结果。我建议您改用innerText。

function makeid(length) {
   var result           = '';
   var characters       = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&_-+=`|(){}[]:;\"'<>,.?/";
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}

 document.getElementById('myid').innerText = makeid(20);

<span id="myid"></span>

关于innerHTML和innerText（source）之间的区别：

不过，innerText与innerHTML不同，innerText使您可以使用HTML富文本格式，并且不会自动对文本进行编码和解码。换句话说，innerHTML检索并设置标签的内容为纯文本，而innerHTML检索并设置标签的内容为HTML格式。

说明innerText和var text = "<span>Hey</span>"; document.getElementById('innerHTML').innerHTML = text; document.getElementById('innerText').innerText = text;之间的区别的示例

<div id="innerHTML"></div>
<div id="innerText"></div>

button1.Text = "X";

另请参阅以下问题： InnerHTML with special character is trimming the data

使用特殊字符时出现随机字符串HTML转义问题

1 个答案: