Question

当我沿着多个p标签选择文本时，我将获得每个标签的每个内容，并在Javascript: How to divide selected text along multiple p tags into each content for each tag中得到回答。

例如，

<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方法，过滤器，包含等方法尝试了此操作，但我无法弄清楚。

谢谢您的时间。

Answer 1

尝试此代码：

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>

Answer 2

我不知道您选择添加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

Answer 3

假设您有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>`

https://jsfiddle.net/emilvr/5Lonrk0f/4/

Javascript：如何将带有多个p标签的选定文本包装到带有span标签的每个标签的每个内容中

3 个答案: