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>

Iхотел бы получить три элемента: «мальчик», «ты девушка», «мы».

Возможно ли использование 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>