這有什么作用，我可以使用香草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