这有什么作用，我可以使用香草JavaScript实现相同的功能吗？

Question

这是代码：

$('<div/>').text($.trim(myId.val())).html();

我得到myId是一个jQuery对象，并且得到了价值。 我知道该值已被修剪。

我怀疑正在创建一个随机的jQuery div对象，从myId给定修剪后的值，然后执行此操作，然后通过html()方法再次获取。 最终结果是myId值的某种格式化版本。

问题是为什么？ 有什么方法可以使用香草JavaScript达到相同的效果吗？

---

编辑：真正赞赏的见解。 我在这里的糟糕形式添加了一个尾声，但这能达到相同的目的吗？

goog.string.htmlEscape(goog.string.trim(goog.dom.forms.getValue(myId)));

Answer 1

它称为Html-encoding ，这是Vanilla JavaScript的替代品：

function htmlEncode(text) {
    var encodedText = text.replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
    return encodedText;
}

您也可以使用类似的方法来做到这一点，例如：

function htmlEncode(text) {
    var txtNode = document.createTextNode(text);
    var txtdiv = document.createElement('div');
    txtdiv.appendChild(txtNode);
    return txtdiv.innerHTML;
};

Answer 2

HTML会转义myId.val()的值，从而删除所有前导和尾随空格。

正如您已经指出的， $.trim(myId.val())仅删除任何前导和尾随空格。

它使用文本值$.trim(myId.val())设置一个“虚拟” div，这意味着它是它的字面值（没有HTML转义）。

当您在不带参数的jQuery元素上调用.html()时，您将获得子节点的HTML转义值（在这种情况下，您刚刚插入的文本）。 例如，在HTML中，“＆”号在字符转义中具有特殊含义，因此文字“＆”号需要以转义形式（ & ）表示。

使用纯JavaScript，这将等效于以下内容：

var myId = document.getElementById('myid');
var a = document.createElement('div');

// probably an input field, original code uses val()
a.textContent = myId.value.trim();
console.log(a.innerHTML);

请注意， String.prototype.trim是一种ES5方法，这意味着较旧的浏览器（例如IE8和更旧的浏览器）可能本身不是此方法。 另外， textContent不是跨浏览器。 在这种情况下，您可以改为：

function trimString(arg) {
  var str = String(arg);
  return str.match(/[\x09-\x0D\x20\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*([\s\S]*?)[\x09-\x0D\x20\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*/)[1];
}

var myId = document.getElementById('myid');
var a = document.createElement('div');

// probably an input field, original code uses val()
var genericText = document.documentElement.textContent ? 'textContent' : 'innerText';
a[genericText] = trimString(myId.value);
console.log(a.innerHTML);

Answer 3

该代码为您提供myId值的HTML编码版本

如果myId值为"<hello>" ，则上面的代码返回"<hello>"

香草JS中的内容如下所示：

var elem = document.createElement('div');
elem.innerText = myId.value; // set as TEXT
console.log(elem.innerHTML); // get as HTML