[英]Javascript: How to wrap selected text along multiple p tags into each content for each tag with span tag
當我沿着多個p標簽選擇文本時,我將獲得每個標簽的每個內容,這在Javascript中得到了回答:如何將沿着多個p標簽的選定文本分為每個標簽的每個內容 。
例如,
<p>I am (selection start)a boy</p>
<p>You are a girl</p>
<p>We are(selection end) friends</p>
現在,我可以獲得三個元素:“男孩”,“你是女孩”,“我們是”。
然后,如何通過span標簽包裝每個元素並更改其樣式? 例如,
<p>I am (selection start) <span style ="font-weight:bold">a boy</span></p>
<p><span style ="font-style:italic">You are a girl</span></p>
<p><span style ="font-decoration:underline">We are</span> (selection end) friends</p>
我嘗試使用jquery wrapinner方法,過濾器,包含等進行此操作,但無法弄清楚。
感謝您的時間。
試試這個代碼:
var elems = document.querySelectorAll('p'); for(var i=0;i<elems.length;i++){ elems[i].innerHTML = elems[i].innerHTML.replace('a boy','<span style="font-weight: bold">a boy</span>'); elems[i].innerHTML = elems[i].innerHTML.replace('You are a girl','<span style="font-weight: bold">You are a girl</span>'); elems[i].innerHTML = elems[i].innerHTML.replace('We are','<span style="font-weight: bold">We are</span>'); }
<p>I am a boy</p> <p>You are a girl</p> <p>We are friends</p>
我不知道您選擇在何處添加span
驗證方式,但是由於您可以使用Jquery,因此可以通過以下代碼獲得解決方案:
$("#p1").html($("#p1").html().replace("a boy", '<span style ="font-weight:bold">$&</span>')); $("#p2").html($("#p2").html().replace("You are a girl", '<span style ="font-style:italic">$&</span>')); $("#p3").html($("#p3").html().replace("We are", '<span style ="text-decoration:underline">$&</span>'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="p1">I am (selection start)a boy</p> <p id="p2">You are a girl</p> <p id="p3">We are(selection end) friends</p>
注意:同樣,它不是font-decoration:underline
它的text-decoration:underline
假設您有3個段落,如下所示:
<p id="p1">I am (selection start)a boy</p>
<p id="p2">You are a girl</p>
<p id="p3">We are(selection end) friends</p>
然后,您可以更改樣式並使用任何html標簽包裝,如下所示:
let p1 = document.getElementById("p1").innerHTML;
let p2 = document.getElementById("p2").innerHTML;
let p3 = document.getElementById("p3").innerHTML;
document.getElementById("p1").innerHTML = `<span style='color:blue'>${p1}</span>`
document.getElementById("p2").innerHTML = `<span style='color:green'>${p2}</span>`
document.getElementById("p3").innerHTML = `<span style='color:darkGray'>${p3}</span>`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.