zoenbo 发表于 2020-11-5 16:58

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

本帖最后由 zoenbo 于 2020-11-5 18:47 编辑

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

<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").innerHTML;
html=html.replace("解釋 #1","<i>解釋 #1</i>").replace("讀音:"," <span class='a'>讀音:").replace("<br>詞性:","</span> <br>詞性:").replace("出处:","<br/>来源:").replace("电话:","");
document.getElementsByClassName("ciyu").innerHTML=html;
</script>
    </div>

pzx521521 发表于 2020-11-5 17:03

本帖最后由 pzx521521 于 2020-11-5 17:09 编辑

你写的就是第一个哦
var html=document.getElementsByClassName("ciyu")
就是第一个的意思
这样修改:

                <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
                                        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 发表于 2020-11-5 17:03

<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").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").innerHTML = html;
</script>
</div>

zoenbo 发表于 2020-11-5 17:13

badyun 发表于 2020-11-5 17:03

「點解」 解釋 #1讀音:dim2 gaai2 詞性:代詞 出处:某度解釋:(廣東話) 用嚟 ...

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

zoenbo 发表于 2020-11-5 17:15

pzx521521 发表于 2020-11-5 17:03
你写的就是第一个哦
var html=document.getElementsByClassName("ciyu")

厉害~!不知道能不能把 「點解」、「刻板」这些替换为空呢?「 」这里每一条都是不一样的
页: [1]
查看完整版本: JS Replace怎么替换Class下边的所有内容