如何透過JS讀一串html碼的tag內容？
容許jQuery
var html = "<!doctype html>
<html>
<head><title></title></head>
<div id="hi">讀這個</div></html>"; //比如整個是html代碼
function get(html, id) {
// 在這裏讀它...
}
已邀請的邦友 {{ invite_list.length }}/5
沒用到jQ，純正則RegExp match
var html = `<!doctype html>
<html>
<head><title></title></head>
<div id="hi">讀這個</div></html>`; //比如整個是html代碼
get(html,"hi");
function get(html, id) {
var reA = new RegExp(`<[^<]*id=["']${id}["']>[^\<]*</[^>]*>`,'gi');
var mat = html.match(reA); // 截取內容
if(mat!==null){
alert(unescape(mat[0]));
}
}
我承認我沒看清題意，修正一下只抓innerHTML【讀這個】
${id}是js裡的string interpolation(字串插補)的用法，避免出現"'"+id+"'"這種字串相加的眼亂狀況
var html = `<!doctype html>
<html>
<head><title></title></head>
<div id="hi">讀這個</div></html>`; //比如整個是html代碼
get(html,"hi");
function get(html, id) {
var reA = new RegExp(`<[^<]*id=["']${id}["'].*>([^\<]+)</[^>]*>`,'i');
var mat = html.match(reA); // 截取內容
if(mat!==null){
alert(mat[1]);
}
}
我的做法是不管什麼tag，只要符合id="hi"的就抓下來
HTML的標準裡，id不能重覆出現，所以我就不管出現幾次的問題了
提供一個不使用正則的方式，使用DOMParser
var html = `<!doctype html>
<html>
<head><title></title></head>
<div id="hi">讀這個</div></html>`; //比如整個是html代碼
get2(html,"hi");
function get2(html, id) {
let doc = new DOMParser().parseFromString(html, "text/html");
alert(doc.getElementById(id).innerHTML);
}
謝謝 最後解法解決了
這裡分享一個土法煉鋼的方法，就是用RegExp作Match獲取匹配的字串
<script>
let html_str=
`<!doctype html>
<html>
<head><title></title></head>
<div balabalabala id="hi" labalabalaba >讀這個
123
是DIV的TEXT
</div></html>
`;
function get_div_text(html_str, div_id){
let re = new RegExp(`<div.*?id=\"${div_id}\".*?>([^<]*)<\/div>`, "g");
let match = re.exec(html_str);
return (match!=null)?match[1]:`DIV.id:${div_id} NOT FOUND!`;
}
console.log(get_div_text(html_str,"hi"));
</script>
樓主在別篇發問裡面有提到你是新手，所以有些基本的東西要跟你分享，例如函式名變數名儘量不要跟一些內建的保留字或是tag重覆比較好，例如你原本的function名叫get，為什麼我把它改成get_div_text()而不用get，因為get會容易跟get或set或getter或setter一類的東西混淆，比較簡單避免的方法就是從命名上面建立好的習慣，例如這個函式的用途是要取得div標籤裡的文字，我就把它命名為get_div_text()，而變數的部份避免跟html標籤混淆也是一樣的道理，原本你用的是html,id，雖然執行過程中不會出錯，但是這種玩法就是在賭它能正常運作(但是當你的程式碼愈來愈龐大複雜時，它會不會跟函式或變數打架真的就要求神保佑了，尤其'javascript弱型別的特性'你最好先花些時間了解一下)，更簡單的方法跟前面一樣，就是取個更好的變數名，例如html_str,div_id。好的習慣可以幫助你日後少繞一些彎路。
用正則(RegExp)的解法方案比較邪魔歪道一些，其實淺水員邦友提到的用DOMParser的方式是比較正統的作法，以下是一個範例參考:
<script>
let html_str=
`<!doctype html>
<html>
<head><title></title></head>
<div id="hi">讀這個
123
是DIV的TEXT
</div></html>
`;
function get_div_text(html_str, div_id){
let parser = new DOMParser();
let doc = parser.parseFromString(html_str, "text/html");
let div_id_inner=doc.body.querySelector(`#${div_id}`);
return (div_id_inner!=null)?div_id_inner.innerHTML:`DIV.id:${div_id} NOT FOUND!`;
}
console.log(get_div_text(html_str,"hi"));
</script>
基礎很重要，基礎很重要，基礎很重要。
還有提問的智慧也很重要。
如果是用jquery
只要用
var hiHtml = $("#hi").html();
這可以拿到了。
iThome鐵人賽
看影片追技術