Извлечение индексов элементов массива из from.value, to.value

Question

Столкнулся с вопросом - нужен скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно с помощью мыши.

Подскажите как будет выглядеть событие выделения подстроки, длиной не более двух символов и событие удаления выбранных символов по щелчку мыши или нажатию кнопки Enter.

Я написал следующий код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Delete Symbols</title>
</head>
<body>
<p>В тексте ниже выделяйте символы, щелкайтем или нажимайте Enter</p>
<p id='sometext'>Тестовый текст</p>
<script src="deletesymbols.js"></script>
</html>

Удаление происходит по событию onclick, но до этого необходимо проверить выделена ли подстрока, длиной не более двух символов. Каким образом осуществить эту проверку? Как получить индексы выделенных символов? Нашел описание классов Selection\Range на Описание классов, но непонятно как получить индексы выделенных символов тега <p> с помощью объектов Selection\Range (дело касается 1-го или 2-х операторов, судя по условию задачи)

P.S. Нашел код на этой же странице Класс Selection

<!doctype html>
<body>
<p id="p">Выдели меня: <i>курсив</i> и <b>жирный</b></p>

От <input id="from" disabled> – До <input id="to" disabled>
<script>
  document.onselectionchange = function() {
    let {anchorNode, anchorOffset, focusNode, focusOffset} = document.getSelection();

    from.value = `${anchorNode && anchorNode.data}:${anchorOffset}`;
    to.value = `${focusNode && focusNode.data}:${focusOffset}`;
  };
</script>
</body>

Как из from.value и to.value можно получить индексы выделяемых символов (начального и конечного)?

Answer 1

Для начинающего разработчика

Давайте для начала разобьём задачу на независимые части, каждую из которых уже удобно делать

Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно

Во первых возникает вопрос - какой именно текст?

текст в поле ввода <input />
тест в контейнере <div></div>

В любом случае задача будет состоять из следующих этапов

получить текст из заданного объекта в переменную
определить какие именно символы будут удалены из строки
сформировать новую строку
занести сформированную строку в заданный объект

Идём дальше:

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

по сравнению с предыдущей задачей придётся модифицировать этап 2) и делать проверку - является ли символ в строке по определённой позиции запрещённым и если да, то продолжить поиск символа для удаления

Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)

Здесь потребуется принципиально другой алгоритм этапа 2)

Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность

--

Вернемся к самой первой задаче. Как я понимаю, требуется использовать только чистый js, никакого jquery?

Этап 1) получить текст из заданного объекта в переменную

<p id='sometext'>Тестовый текст</p>

Для этого потребуется команда querySelector:

let element = document.querySelector('#sometext');

А для того, чтобы получить текст из элемента свойство innerHTML

let text = element.innerHTML;

Если же используется для ввода текст элемент <input>, тогда необходимо использовать свойство value

let text = element.value;

Этап 4) записать текст из переменной в заданный объект делается также:

element.innerHTML = text;

или

element.value = text;

Этап 2) определить какие именно символы будут удалены из строки

Для определения случайной позиции в строке (случайного натурального числа) потребуется функция

Math.random()

функция возвращает случайное значение от 0 до 1, поэтому чтобы получить позицию в строке требуется

узнать размер строки
умножить случайное число на размер строки
округлить вверх или вниз полученное значение

т.е.

const str_len = text.length;
const rnd = Math.random();
const index = Math.ceil(str_len * rnd);

Math.ceil(x) откидывает дробную часть числа

Остаётся этап 3) когда требуется собрать новую строку, в которую требуется включить все символы до найденной на этапе 2 позиции и все символы после найденной на этапе 2 позиции:

Для этого есть функция substring(start, end), т.е.

первая часть строки будет

const part1 = text(0, index);

вторая часть строки будет

const part2 = text(index + 1, str_len);

или const part2 = text(index + 1); поскольку если не указывать конец подстроки, то подстрока будет выделена до конца строки

и осталось склеить 2 части, чтобы получить новую строку

const new_text = part1 + part2

БЛОГ НА HUSL

Извлечение индексов элементов массива из from.value, to.value

Ответы (1 шт):