JavaScript中最快的替换字符串方式是什么？

Question

当我向服务器提交/POST数据时，需要对其字符进行HTML编码（相关字符），因为通过设置validationRequest = false禁用输入检查不是一个好的实践。

所有解决方案最终都是替换字符串中的字符：

这就是我所写的内容。

function htmlEncode(str) {
    str = str.replace(/\&/g, "&");
    str = str.replace(/\</g, "&lt;");
    str = str.replace(/\>/g, "&gt;");
    str = str.replace(/ /g, "&nbsp;");
    return str;
}

但显然，正则表达式可以被更快的东西替代（别误会，我喜欢正则表达式）。

此外，使用索引和子字符串似乎很浪费时间。

做这件事最快的方法是什么？

- Royi Namir

---

通过将validationRequest = false来禁用输入检查不是一个好的做法。更糟糕的做法是试图绕过拒绝你想要接受的数据的安全过滤器。应该设置安全过滤器以访问你想要接受的内容类型，而不是接受旨在保护那些不知道自己在做什么的人的默认设置。 - Quentin

https://dev59.com/iHM_5IYBdhLWcg3wzmnL - Erich Kitzmueller

JavaScript jQuery HTML编码 - vzwick

@RoyiNamir — 优秀的程序员不会在代码剖析之前进行微观优化。他们编写旨在最大化可维护性的代码。 - Quentin

@RoyiNamir - 首先在客户端不进行 HTML 编码将获得最佳的客户端性能。 - Quentin

Answer 1

function htmlEncode(str) {
    return String(str)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

jsperf测试结果显示该方法快速且在最近浏览器版本中可能是最快的选项。

另外一种方式也可以像这样实现

function htmlEncode(value){
  return $('<div/>').text(value).html();
}

function htmlDecode(value){
  return $('<div/>').html(value).text();
}

- Sender

---

这将无法处理多个空格。 - Royi Namir

这适用于大多数情况，但是这个htmlDecode的实现将消除任何额外的空格。因此，对于某些“input”值，input！= htmlDecode（htmlEncode（input））。这在某些情况下对我们造成了问题。例如，如果输入=“<p> \ t Hi \ n There </ p>”，往返编码/解码将产生“<p> Hi There </ p>”。 - Royi Namir

我认为使用获取文本和 trim() 函数会对你有所帮助。或者也可以使用 .replace(/ /g, ' ')。 - Sender

我不得不将'替换为'以避免.NET的“潜在危险”错误。 - AndyMcKenna

Answer 2

如果你只是需要编码 HTML 实体，可以尝试以下方法：

function htmlEncode(str) {
    var d = document.createElement('b');
    d.innerText = str;
    return d.innerHTML;
}

这种方法不是最快的。这个测试表明，regExp更快：http://jsperf.com/encodehtml

然而，差异似乎会随着你消耗的HTML越多而变得更小。

innerText方法似乎更可靠，因为它将利用本地浏览器转换实体的表格。使用RegExp时，总有可能会漏掉某些东西，正如一些以前的答案所示，使用RegExp消耗HTML并不总是最优的。

- David Hellsing

---

看我的评论给 Champ。这里一样。 - Royi Namir

值得注意的是，此方法返回 innerText 的浏览器实现，因此 \n 会变成 <br> 等等。如果您需要对每个字符进行显式控制，则正则表达式可能更好。 - David Hellsing

Answer 3

function htmlEncode(value){
    if (value) {
        return jQuery('<div />').text(value).html();
    }
    return '';
}
 
function htmlDecode(value) {
    if (value) {
        return $('<div />').html(value).text();
    }
    return '';
}

- GajendraSinghParihar

---

这在大多数情况下都有效，但是这个htmlDecode的实现将消除任何额外的空格。所以对于某些“input”值，input != htmlDecode(htmlEncode(input))。这在某些情况下对我们造成了问题。例如，如果input =“<p> \t Hi \n There </p>”，进行往返编码/解码将产生“<p> Hi There </p>”。 - Royi Namir