Question

以下是代码：

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

我得到myId是一个jQuery对象，我得到了值。我知道正在削减价值。

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

问题是为什么？有没有办法使用vanilla JavaScript实现相同的目标？

编辑：真的很欣赏这些见解。我在这里添加一个尾声的不好的形式，但这是否实现了相同的目标？

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

Answer 1

它被称为 Html编码，这里是您的 Vanilla JavaScript 替代方案：

function htmlEncode(text) {
    var encodedText = text.replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .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())只删除任何前导和尾随空格。

它设置一个“虚拟”div，其文本值为$.trim(myId.val())，这意味着它是它的文字值（没有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

这是做什么的，我可以用vanilla JavaScript实现同样的目标吗？

3 个答案: