在HTML字符串中獲取HTML子元素

我在AngularJS中從api獲取JSON響應。我有它的描述.Description包含字符串中的HTML標籤。我想在此分享回覆項目。在HTML字符串中獲取HTML子元素

{ 
    name:'Name of Item', 
    Description:'<div>Details: Here is Details</div><div>Type: Here is Type</div>' 
}

我只是想分開細節和從描述類型到兩個不同的字符串。任何機構都可以提供幫助。我試圖尋找一些幫助，但沒有得到任何 + ive或匹配結果。

由於

來源

2017-10-05 Muhammad Nadeem

您可以發佈[最小的，完整的和可驗證的示例]（https://stackoverflow.com/help/mcve） – bhansa

通過將其插入一個虛擬的HTML元素解析HTML字符串。然後，您可以通過訪問childNodes的textContent來訪問節點的文本。

var data = { 
 
    name: 'Name of Item', 
 
    Description: '<div>Details: Here is Details</div><div>Type: Here is Type</div>' 
 
}; 
 

 
//Create a dummy element to hold the HTML 
 
var el = document.createElement('div'); 
 
el.innerHTML = data.Description; 
 

 
//Get child nodes; can use getElementById, querySelectorAll, etc. 
 
var details = el.childNodes[0].textContent; 
 
var type = el.childNodes[1].textContent; 
 

 
console.log(details); 
 
console.log(type);

來源

2017-10-05 12:48:54

這工作對我很好，謝謝:) –

第一提取物的描述中部分從JSON。

比方說，你JSON是存儲在

var response = API call(); 
    response.data.Description.split('</div>')

來源

2017-10-05 12:44:20 Rachel

可能是你需要做一些字符串manupulation。就像下面一樣。

var app = angular.module('app', []) 
.controller('ctrl', function ($scope) { 
    var data = { 
     name: 'Name of Item', 
     Description: '<div>Details: Here is Details</div><div>Type: Here is Type</div>' 
    } 

    $scope.data = data; 
    $scope.result = $scope.data.Description.split('</div>'); 
    $scope.result = $scope.result[0].slice(0, -1); //take the first value from array, and slice last char, which is comma 
    $scope.result = $scope.result + '</div>' //insert div at the end 
})

來源

2017-10-05 12:49:09

我實現這一點，但是這不是專業的方式，BTW我喜歡它:) @Rakesh Burbure –

是的，但它只是一個工作:) –

在HTML字符串中獲取HTML子元素

回答

相關問題