Javascript：如何将多个p标签中的选定文本划分为每个标签的每个内容

Question

我想知道是否可以将沿着多个p标签选择的文本分为每个标签的每个内容。例如，

<p>I am (selection start)a boy</p>
<p>You are(selection end) a girl</p>

我想像“男孩”和“你是”那样分开。

还有三个p标签，

<p>I am (selection start)a boy</p>
<p>You are a girl</p>
<p>We are(selection end) friends</p>

我想获得三个元素：“男孩”，“你是女孩”，“我们是”。

Chrome是否可以使用javascript？

谢谢您的答复。

Answer 1

尝试一下

document.onmouseup=function(){
    var selected = document.getSelection().toString()
    var data=selected.replace(/\r?\n|\r/g, "\n").split("\n").filter(Boolean)
    var dataWithSpan=data.map((x,y)=>`<span>${x}</span>`);
    console.log(data)
    console.log(dataWithSpan)
}

select from the following paragraps
<p>I am a boy</p>
<p>You are a girl</p>

select from the following paragraps
<p>I am a boy</p>
<p>You are a girl</p>
<p>We are friends</p>