JS Replace怎么替换Class下边的所有内容

zoenbo

下边的JS可以实现给 解釋 #1 加个<i></i>标签，给 讀音：dim2 gaai2 加<span>标签，能把 出处 替换成 来源，能把 电话 替换为空，但是为什么只能替换掉一条，第二条替换不了呢？

[HTML] 纯文本查看 复制代码

<div class="content">
    <div class="ciyu">「點解」   解釋 #1<br />讀音：dim2 gaai2   <br />詞性：代詞   出处：某度<br />解釋：(廣東話) 用嚟問原因、理由嘅疑問代詞；何解；乜#解究  (英文) why; how come  <br />例句：(粵) 你上個星期日點解唔嚟嘅？ (nei5 soeng6 go3 sing1 kei4 jat6 dim2 gaai2 m4 lai4 ge2?)  (英) Why didn't you come last Sunday? (粵) 點解你幾時都on住line，好似唔使瞓噉嘅？ (dim2 gaai2 nei5 gei2 si4 dou1 on1 zyu6 laai1, hou2 ci5 m4 sai2 fan3 gam2 ge2?)  (英) Why are you online all the time, like you don't need to sleep?  电话： </div>
       <div class="ciyu">「刻板」 <br />解釋 #1 讀音：haak1 baan2 ,hak1 baan2   <br />詞性：形容詞</div>

<script>   
var html=document.getElementsByClassName("ciyu")[0].innerHTML;
html=html.replace("解釋 #1","<i>解釋 #1</i>").replace("讀音："," <span class='a'>讀音：").replace("<br>詞性：","</span> <br>詞性：").replace("出处：","<br/>来源：").replace("电话：","");
document.getElementsByClassName("ciyu")[0].innerHTML=html;
</script>
    </div>

pzx521521

你写的就是第一个哦

[Asm] 纯文本查看 复制代码

var html=document.getElementsByClassName("ciyu")[0]

[0]就是第一个的意思
这样修改:

[HTML] 纯文本查看 复制代码

 
		<div class="content">
			<div class="ciyu">「點解」 解釋 #1<br />讀音：dim2 gaai2 <br />詞性：代詞 出处：某度<br />解釋：(廣東話) 用嚟問原因、理由嘅疑問代詞；何解；乜#解究 (英文) why; how
				come <br />例句：(粵) 你上個星期日點解唔嚟嘅？ (nei5 soeng6 go3 sing1 kei4 jat6 dim2 gaai2 m4 lai4 ge2?) (英) Why didn't you come
				last Sunday? (粵) 點解你幾時都on住line，好似唔使瞓噉嘅？ (dim2 gaai2 nei5 gei2 si4 dou1 on1 zyu6 laai1, hou2 ci5 m4 sai2 fan3 gam2
				ge2?) (英) Why are you online all the time, like you don't need to sleep? 电话： </div>
			<div class="ciyu">「刻板」 <br />解釋 #1 讀音：haak1 baan2 ,hak1 baan2 <br />詞性：形容詞</div>

			<script>
				let ciyus = document.getElementsByClassName("ciyu")
				for (var i = 0; i < ciyus.length; i++) {
					ciyu = ciyus[i]
					var html = ciyu.innerHTML;
					html = html.replace("解釋 #1", "<i>解釋 #1</i>").replace("讀音：", " <span class='a'>讀音：").replace("<br>詞性：",
						"</span> <br>詞性：").replace("出处：", "<br/>来源：").replace("电话：", "");
					ciyu.innerHTML = html;		
				}
			</script>
		</div>

badyun

[HTML] 纯文本查看 复制代码

<div class="content">
  <div class="ciyu">「點解」 解釋 #1<br />讀音：dim2 gaai2 <br />詞性：代詞 出处：某度<br />解釋：(廣東話) 用嚟問原因、理由嘅疑問代詞；何解；乜#解究 (英文) why; how
    come <br />例句：(粵) 你上個星期日點解唔嚟嘅？ (nei5 soeng6 go3 sing1 kei4 jat6 dim2 gaai2 m4 lai4 ge2?) (英) Why didn't you come
    last Sunday? (粵) 點解你幾時都on住line，好似唔使瞓噉嘅？ (dim2 gaai2 nei5 gei2 si4 dou1 on1 zyu6 laai1, hou2 ci5 m4 sai2 fan3 gam2
    ge2?) (英) Why are you online all the time, like you don't need to sleep? 电话： </div>
  <div class="ciyu">「刻板」 <br />解釋 #1 讀音：haak1 baan2 ,hak1 baan2 <br />詞性：形容詞</div>

  <script>
    var html = document.getElementsByClassName("ciyu")[0].innerHTML;
    html = html.replace(/解釋 \#1/g, "<i>解釋 #1</i>").replace(/讀音\：/g, " <span class='a'>讀音：").replace(/\<br\>詞性\：\"\, \"\<\/span\> \<br\>詞性\：/g).replace(/出处\：\"\, \"\<br\/\>来源\：/g).replace("电话：", "");
    document.getElementsByClassName("ciyu")[0].innerHTML = html;
  </script>
</div>

zoenbo

badyun 发表于 2020-11-5 17:03
[mw_shl_code=html,true]
  「點解」 解釋 #1讀音：dim2 gaai2 詞性：代詞 出处：某度解釋：(廣東話) 用嚟 ...

大佬，现在这个 解釋 #1 以后的内容给加了个<span></span>，如果是给 讀音：dim2 gaai2  讀音：haak1 baan2 ,hak1 baan2 加<span></span>就完美了

zoenbo

pzx521521 发表于 2020-11-5 17:03
你写的就是第一个哦
[mw_shl_code=asm,true]var html=document.getElementsByClassName("ciyu")[0][/mw_sh ...

厉害~！不知道能不能把 「點解」、「刻板」这些替换为空呢？「 」这里每一条都是不一样的