這是幹什麼用的，我能用vanilla JavaScript實現嗎？

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

Wh在此情況下，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 2

該代碼可以讓你的HTML編碼版本的myId

如果myId值"<hello>"，上面的代碼返回"<hello>"

香草JS同樣的價值會看起來像：

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

Answer 3

它被稱爲的HTML編碼，在這裏這些都是你香草的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; 
};