Как заменить выделенный текст в input на дополнение к нему?

Question

[historydev]

Добрый вечер. Делаю редактор, нужно при выделении заменить допустим MY TEXT на MY TEXT2, это я смог сделать, но проблема в том, что если таких фраз 2 или 3, то он берёт первое совпадение. Я не понимаю как это реализовать через getSelection и работать с самой выделенной областью. Как заменить именно выделенную фразу, а не первое совпадение?

import {url} from "../../serverConfig";
import GetTextEditor from "../lowLvlComponents/textEditor/textEditor";
import styles from '../../pages/css/articles/createArticle.module.css';
import { useState } from 'react';


export default function CreateArticle() {

    const [input, setInput] = useState();
    const [data, setData] = useState();

    return (
        <div className={styles.createArticle}>
            <div className={styles.title} onClick={() => input.value =
                input.value.replace(
                    data, `<b>${data}</b>`
                )}>Новая статья</div>
            <form action={`${url}/createArticle`}>
                <input type="text" placeholder={'Название'} onSelect={() => 
                    setData(document.getSelection().toString())
                } onClick={(e) => 
                    setInput(e.target)} onMouseDown={() => false}/>
                <input type="text" placeholder={'Ссылка на превью-картинку'} />
                <input type="text" placeholder={'Превью-текст'} />
                <GetTextEditor />
                <div className={styles.submitBox}>
                    <button>Создать</button>
                </div>
            </form>
        </div>
    )

}

Спасибо.

Answer 1

[WbICHA]

Это не серьёзно, прямо в документации решение данной задачи есть...
https://developer.mozilla.org/ru/docs/Web/API/Sele...

Comments

[historydev]

У меня нет объекта window, как мне с ним работать?

[historydev]

В next.js почему-то его нет, сори, упомянуть забыл что юзаю его

[historydev]

Почему-то он есть только при вызове функции из рендера, хз, разобрался, буду пробовать

[historydev]

Вот такая функция получилась, однако оно почему-то плюсует текст рядом с input, вместо замены непосредственно в нём:

const getSelection = () => {

        const sel = window.getSelection();

        if (sel.rangeCount) {

            const range = sel.getRangeAt(0);

            range.deleteContents();
            range.insertNode(document.createTextNode(`<b>${sel}</b>`));

        }
    }

Какой метод мне нужен? Я пробовал искать set,text,change, replace - результатов нет

[WbICHA]

Владимир, вот скажите честно, вы вообще читали документацию, что я скинул? Там даже всё на русском.
.toString()

[historydev]

WbICHA, да я понимаю что нужно юзать sel.toString(), я не могу найти метод который будет заменять содержимое. Знания русского не затруднят вам ответить где здесь описан метод, зеркальный replace?

[historydev]

Нашёл вот это, судя по коду, то что мне нужно, буду пробовать

[historydev]

Это работает очень странно, но другого я не нашёл, пробую так:

selectedTextArea.value = selectedTextArea.value.replace(
            selectedTextArea.selectionStart + selectedTextArea.selectionEnd, 'text');