使用javascript或jquery在innerHTML中解析html

Question

像下面的3個例子一樣，如何在獲取innerhtml之后如何獲取id和解析以獲取其編號：

var myIHTML = cell[0].innerHTML;

myIHTML = '<input type="submit" name="pic" value="Preview" /><div id="allItems1" style="display: none;"></div>' ;
or
myIHTML = '<input type="submit" name="pic" value="Preview" /><div id="allItems2" style="display: none;"></div>';
or
myIHTML ='<input type="submit" name="pic" value="Preview" /><div id="allItems11" style="display: none;"></div>'

我喜歡從allItems id獲取編號。 例如1、2、11等

Answer 1

您可以將您的innerHTML返回到DOM，因此您可以在其中進行搜索，然后解析ID。 這是一個例子：

// Create a div to insert back the contents into
var div = document.createElement('div');

// Insert the contents back
div.innerHTML = '<input type="submit" name="pic" value="Preview" /><div id="allItems1" style="display: none;"></div>';

// Get the element with id starting with allItems
var id = div.querySelector('[id^="allItems"]').id;

// Get the number by replacing non-digits with empty character and then converting the string to integer
console.log( 'Number from id is', parseInt( id.replace ( /[^\d.]/g, '' ) ) );

Answer 2

您可以使用jQuery來解析字符串：

var elems = $(myIHTML);

然后使用filter（）選擇其中的元素：

var alItems2Elem = elems.filter('#allItems2');

要從div的ID中獲取數字，請執行以下操作：

var alItemsId = elems.filter('div').attr('id').replace('allItems', '');

這是一個Codepen

在此處閱讀有關.filter()更多信息。