Как я могу вставить некоторый текст в текстовую область, используя JavaScript или jQuery?

Question

У меня есть две текстовые области - одна для вставки в нее текста, другая для вставки слов из первой текстовой области после двойного щелчка по ним.Как я могу это сделать?

Я уже добился некоторого результата в следующем случае: 1. Вставить некоторый текст в textarea 2. Дважды кликнуть на слове из textarea 3. Посмотреть, как это слово появляется вdiv с ul внутри.Слово добавляет как li.Смотрите код дела:

//html block
<textarea name="" id="text" cols="30" rows="10" ondblclick="copyPaste()" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur minus iure suscipit quam expedita? Sed minus laboriosam natus quaerat autem enim accusantium, architecto officiis aliquam pariatur. Adipisci provident tenetur velit!</textarea>
    <div id="wordList" class="wordListclass">
        <ul id="myList">
            <li></li>
        </ul>
    </div>
</body>

//js block for copy-pasting words after doubleclick on the text from the texarea with id ='text'
"use strict";

function copyPaste(){
    var selection = window.getSelection();
    console.log(selection.toString());
    var node = document.createElement("LI");               
var selectionWithButton =  selection;
var textnode = document.createTextNode(selectionWithButton);      
node.appendChild(textnode);                             
document.getElementById("myList").appendChild(node);   
}

Теперь мне нужно избавиться и добавить вторую текстовую область.Я хочу видеть, как слова после двойного нажатия на текст из первой текстовой области появляются во второй текстовой области.Важное примечание - они должны иметь следующую структуру:

word1
word2
word3

без тегов html, потому что после того, как я вижу список этих слов во втором текстовом поле, я хочувставлять их в базу данных, поэтому HTML-теги (как в приведенном мною коде) были бы нежелательны.К сожалению, замена элемента div на textarea просто не работала.Спасибо всем за чтение и помощь!

Answer 1

Если я правильно понимаю, вы просто хотите вставить выбранное слово во вторую текстовую область вместо списка.

Для этого вы можете просто добавить текст, используя свойство value текстовой области.

Чтобы текст появлялся в разных строках, вы можете использовать \n - символ, который вставляет новую строку. Вы можете найти больше информации здесь о escape-последовательности.

Ваша функция может выглядеть следующим образом:

function copyPaste(){
    // trim() is used here to remove the whitespace at the end of the word when you dblClick on a word
    const selection = window.getSelection().toString().trim();
    const textarea2 = document.getElementById("pasteTextarea");
    if(!textarea2.value) {
        // Don't add a new line when the textarea is empty
    	textarea2.value = selection;
    }
		else {
    	textarea2.value += `\n${selection}`;    
    }
}

<textarea name="" id="text" cols="30" rows="10" ondblclick="copyPaste()" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur minus iure suscipit quam expedita? Sed minus laboriosam natus quaerat autem enim accusantium, architecto officiis aliquam pariatur. Adipisci provident tenetur velit!</textarea>

<textarea name="" id="pasteTextarea" cols="30" rows="10"></textarea>

Answer 2

    const myList = document.querySelector("div#wordList ul#myList") // Get the list

    function copyPaste(){
        let textAreaValue = document.querySelector("textarea#text").value //get the written text in textarea
        myList.innerHTML += `<li> ${textAreaValue} </li>` //put the "textAreaValue" in the list
    }

Как то так?