1

Тема: Виділити текст в редакторі.

З javascript знайоми на половину і ніде толком неможу знайти інфу чи можна за допомогою нього виділити фрагмет тексту який вже розміщений в редакторі?

Що я маю на увазі? От коли хтось буде відповідати на це повідомлення він відкриє редактор, напише текст і можливо захоче зробити якесь слово чи фразу жирним "strong", то він спочатку виділить це слово і потім клікне на кнопку "b". Мені потрібно, щоб при кліку по моїй кнопці виділявся певний текст. Таке може зробити js?

2

Re: Виділити текст в редакторі.

https://www.w3schools.com/jsref/tryit.a … rea_select приклад, але він захоплю весь текст, а мені потрібно 1-2 слова.

3

Re: Виділити текст в редакторі.

спробуйте погратись з contenteditable
https://github.com/221V/221V.github.io/ … index.html
https://221v.github.io/other-examples/c … index.html
думаю, там є можливості, проте браузери часів мамонтів не підтримують ці фічі

4

Re: Виділити текст в редакторі.

html

<input id="in" type="text" value="sfsfdfgdfgsf">
<button id="btn" onclick="selectMe()">Select</button>

js

const inputEl = document.getElementById('in');
document.getElementById('btn').addEventListener('click', () => {
  inputEl.focus();
  inputEl.setSelectionRange(2, 5)
});

приклад
https://codepen.io/anon/pen/YaWQyz?editors=1011

Подякували: 221VOLT, leofun01, /KIT\4

5

Re: Виділити текст в редакторі.

ого, mr. FakiNyan серйозно прокачав свої навики !
суп)

6 Востаннє редагувалося mmy3uka (16.03.2018 18:04:17)

Re: Виділити текст в редакторі.

FakiNyan написав:

html

<input id="in" type="text" value="sfsfdfgdfgsf">
<button id="btn" onclick="selectMe()">Select</button>

js

const inputEl = document.getElementById('in');
document.getElementById('btn').addEventListener('click', () => {
  inputEl.focus();
  inputEl.setSelectionRange(2, 5)
});

приклад
https://codepen.io/anon/pen/YaWQyz?editors=1011


Дякую за підповідь, але цей спосіб незовсім підходить, мені потрібно пошук зробит не по символьно (старт і кінець), а по цілому слову. Скажем там буде текст --- тру лялялял ляляляля пластикові вікна Івано-франківськ. От мені потрібно виділити фразу "пластикові вікна Івано-франківськ".

7

Re: Виділити текст в редакторі.

mmy3uka написав:

Дякую за підповідь, але цей спосіб незовсім підходить, мені потрібно пошук зробит не по символьно (старт і кінець), а по цілому слову. Скажем там буде текст --- тру лялялял ляляляля пластикові вікна Івано-франківськ. От мені потрібно виділити фразу "пластикові вікна Івано-франківськ".

пошук позиції підстроки уже не працює?

8

Re: Виділити текст в редакторі.

З javascript знайоми на половину

9 Востаннє редагувалося 221VOLT (17.03.2018 18:35:40)

Re: Виділити текст в редакторі.

у такому випадку радимо познайомитись з гуглом, з документацією js
дані для гуглення у вас уже є
успіхів!)

10 Востаннє редагувалося Ярослав (23.03.2018 11:31:38)

Re: Виділити текст в редакторі.

mmy3uka, Ви можете доповнити приклад FakiNyan і побудувати функцію, яка буде виділяти підрядок із рядка.
В його прикладі, уже є функція, яка виділяє текст по початковому і кінцевому індексу.
Наша задача - задати правильні початковий і кінцевий індекси:
ось шматочок коду який це робить:
https://codepen.io/anon/pen/WzOKzm?editors=0011

// Рядок, в якому необхідно здійснювати пошук.
var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

// Підрядок для пошуку.
var string = "Lorem";
// Індекс шуканого підрядка в рядку із текстом
//  або -1, якщо підрядок не знайдено.
var start = text.indexOf(string);
// Індекс наступного символу за підрядком.
//  Якщо шуканий підрядок не знайдено - результат не вірний.
var end = text.indexOf(string) + string.length;
// Виводить в консоль шуканий підрядок, його початковий та кінцевий індекси.
console.log("string: " + string + ", start: " + start + ", end: " + end);

// Приклад 2.
string = "ipsum";
start = text.indexOf(string);
end = text.indexOf(string) + string.length;
console.log("string: " + string + ", start: " + start + ", end: " + end);

// Приклад 3.
string = "ip2sm";
start = text.indexOf(string);
end = text.indexOf(string) + string.length;
// Шуканий підрядок не знайдений, тому результат невірний.
console.log("wrong! " + "string: " + string + ", start: " + start + ", end: " + end);

// Приклад 4: Використання оператора if для того, щоб виводити тільки правильні результати.
string = "ip2sm";
start = text.indexOf(string);
if (start != -1) { // Якщо підрядок знайдений.
  end = start + string.length;
  console.log("string: " + string + ", start: " + start + ", end: " + end);
} else { // Якщо підрядок не знайдений.
  console.log("string " + string + " is not found");
}

// Приклад 5.
string = "ipsum";
start = text.indexOf(string);
if (start != -1) {
  end = start + string.length;
  console.log("string: " + string + ", start: " + start + ", end: " + end);
} else {
  console.log("string " + string + " is not found");
}

Результат виконання:

"string: Lorem, start: 0, end: 5"

"string: ipsum, start: 6, end: 11"

"wrong! string: ip2sm, start: -1, end: 4"

"string ip2sm is not found"

"string: ipsum, start: 6, end: 11"

Якщо є якісь питання - ставте їх.

11

Re: Виділити текст в редакторі.

Ярослав - Супер, дякую. Палиць в гору.

12

Re: Виділити текст в редакторі.

Удачі

13

Re: Виділити текст в редакторі.

Виділення тексту в input i textarea освоїв. Тепер залишилось таке питання, як можна виділити частину тексту або слово в "p, span чи div" елементах?

14

Re: Виділити текст в редакторі.

mmy3uka, думаю варто створити нову тему із цим питанням.