如何修改部分反應狀態的字符串

Question

1. 我有一個名爲train的狀態。

2. 我從API獲取JSON文件並使用this.setState({train: json})將JSON文件設置爲state.train。

3. 在該狀態下火車，有route_name和advisory_message：

   { 
   "route_name": "Warminster", 
   "advisory_message": "<div class=\"fares_container\">\n\t\t\t\t <p>Customers should review the service information below as trains operating to Center City and continuing to Airport Terminals will depart <strong>EARLIER <\/strong>than regularly scheduled at <strong>Warminster, Hatboro, Crestmont, Roslyn, Ardsley, Glenside, and Jenkintown-Wyncote stations<\/strong>.<\/p>\n<p><span style=\"font-size: small;\"><strong>Inbound (toward Center City) Service:<\/strong><\/span><\/p>\n<p>Download the <a title=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" href=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" target=\"_blank\">PDF Sunday, October 29th Warminster timetable<\/a> or click on the image below to enlarge.<\/p>\n<p><a title=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" href=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" target=\"_blank\"><img src=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" alt=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" width=\"725\" height=\"224\" \/><\/a><\/p>\n<ul>\n<\/ul>\n<p>AM Trains <strong>#403, #405, and #407<\/strong> will depart Glenside Station at the regularly scheduled times<\/p>\n<ul>\n<\/ul>\n<<\/div>" 
   } 
   

我如何改變這種advisory_message值的一部分？例如，更改href？

非常感謝。

Answer 1

您可以使用JQuery非常輕鬆地解析json中的html，然後在更改href後設置狀態。這是一個例子。

var myJSON = { 
 
"route_name": "Warminster", 
 
"advisory_message": "<div class=\"fares_container\">\n\t\t\t\t <p>Customers should review the service information below as trains operating to Center City and continuing to Airport Terminals will depart <strong>EARLIER <\/strong>than regularly scheduled at <strong>Warminster, Hatboro, Crestmont, Roslyn, Ardsley, Glenside, and Jenkintown-Wyncote stations<\/strong>.<\/p>\n<p><span style=\"font-size: small;\"><strong>Inbound (toward Center City) Service:<\/strong><\/span><\/p>\n<p>Download the <a title=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" href=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" target=\"_blank\">PDF Sunday, October 29th Warminster timetable<\/a> or click on the image below to enlarge.<\/p>\n<p><a title=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" href=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" target=\"_blank\"><img src=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" alt=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" width=\"725\" height=\"224\" \/><\/a><\/p>\n<ul>\n<\/ul>\n<p>AM Trains <strong>#403, #405, and #407<\/strong> will depart Glenside Station at the regularly scheduled times<\/p>\n<ul>\n<\/ul>\n<<\/div>" 
 
}; 
 
var msg = myJSON.advisory_message; 
 
var $advisoryHTML = $(msg,{html:msg}); 
 
var anchors = $("a", $advisoryHTML); 
 
//change href of first anchor 
 
console.log("old href is: " + $(anchors[0]).attr("href")); 
 
$(anchors[0]).attr("href", "/my/new/href"); 
 
console.log("NEW href is: " + $(anchors[0]).attr("href")); 
 
// put the modified html back into the json object 
 
myJSON.advisory_message= $advisoryHTML.html(); 
 
//this.setState({train: myJSON})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>