iT邦幫忙

0

如何讀一串html碼的tag內容?求解

如何透過JS讀一串html碼的tag內容?
容許jQuery

var html = "<!doctype html>
<html>
<head><title></title></head>
<div id="hi">讀這個</div></html>"; //比如整個是html代碼

function get(html, id) {
// 在這裏讀它...
}


看更多先前的討論...收起先前的討論...
淺水員 iT邦研究生 3 級 ‧ 2021-01-05 22:29:38 檢舉
https://developer.mozilla.org/zh-TW/docs/Web/API/DOMParser
235467890 iT邦新手 5 級 ‧ 2021-01-05 23:07:55 檢舉
具體?
ccutmis iT邦高手 4 級 ‧ 2021-01-05 23:25:35 檢舉
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way
235467890 iT邦新手 5 級 ‧ 2021-01-06 11:33:04 檢舉
謝謝,成功解決了!
4
japhenchen
iT邦大師 1 級 ‧ 2021-01-06 09:06:41
最佳解答

沒用到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]));
    }
}

https://jsfiddle.net/xdbre4o0/

看更多先前的回應...收起先前的回應...

我承認我沒看清題意,修正一下只抓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]);
    }
}

https://jsfiddle.net/xdbre4o0/2/

我的做法是不管什麼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);
}

https://jsfiddle.net/xdbre4o0/7/

235467890 iT邦新手 5 級 ‧ 2021-01-06 11:24:17 檢舉

謝謝 最後解法解決了

其實說穿了,DOMParser也算是使用巢狀正則分解字串的方法,把字串拆成可路徑分解的物件,只是我們都沒看到內部運作方式而已~~我兩行搞定,但瀏覽器底層做了多少事,我沒去研究

淺水員 iT邦研究生 3 級 ‧ 2021-01-06 15:27:13 檢舉

像是下列這種有些 js 內的字串剛好符合正則
想用正則分開就滿複雜了

<div id="hi">讀這個</div>
<script>
var x='<div id="hi">在js內的字串(這個不要讀)</div>';
</script>

所以需要巢狀正則處理.....不過那對新手而言,太複雜了

2
ccutmis
iT邦高手 4 級 ‧ 2021-01-06 07:50:51

這裡分享一個土法煉鋼的方法,就是用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>

基礎很重要,基礎很重要,基礎很重要。
還有提問的智慧也很重要。

2

如果是用jquery

只要用

var hiHtml = $("#hi").html();

這可以拿到了。

看更多先前的回應...收起先前的回應...
235467890 iT邦新手 5 級 ‧ 2021-01-06 11:22:48 檢舉

ccutmis iT邦高手 4 級 ‧ 2021-01-06 11:40:13 檢舉

以傳統武術點到為止來說,這樓是正解。
/images/emoticon/emoticon01.gif

froce iT邦大師 1 級 ‧ 2021-01-06 11:46:13 檢舉

點到為止的話我會跟他說console.log自己看,innerHtml在那。XD

都說新手了。就基本點到就好。
而且看他的回應其實本來就有有點「省字」大王的感覺。
反正他要點我也就點了吧。不想說太多了。
可能只是應付功課的學生。就幫忙應付一下就行了。
不想說太多

(謎:可是別人你都說很多耶~~)
(我:你知道的太多了...)

ccutmis iT邦高手 4 級 ‧ 2021-01-06 16:33:14 檢舉

我都是利用回答在做自己的筆記
這陣子都在玩Python
有些js語法又還給google了...^^"

0
jeffby8
iT邦新手 5 級 ‧ 2021-01-14 22:42:59

STFW

我要發表回答

立即登入回答