Изменения стиля слова при нажатии на него?

Question

[Bor1and]

Необходимо при клике на слово в тексте, оно выделялось рамкой. Не знаю как это сделать на Angular2. Может кто-то знает как это реализовать?

Answer 1

[Naim]

HTML

<p style="font-size: 35px; font-weight: 600" onclick="lightSelection()">Изменения стиля слова при нажатии на него?</p>
<p onclick="lightSelection()" style="font-size: 20px; font-weight: 400">
Необходимо при клике на слово в тексте, оно выделялось рамкой. Не знаю как это сделать на Angular2. Может кто-то знает как это реализовать?
</p>

JavaScript

function lightSelection() { // вызов функции при клике
		var userSelection = window.getSelection(); // выделение
			for(var i = 0; i < userSelection.rangeCount; i++) { // получаем местоположение выделеного текста
				highlight(userSelection.getRangeAt(i)); // передаем дальше, в другую функцию
			}
		}
			
function highlight(range) {
			var newNode = document.createElement("span"); // создаем span элемент
			   newNode.setAttribute(
			      "style",
			      "background-color: yellow; display: inline;"
			   ); // задаем стили для этого элемента
range.surroundContents(newNode); // https://developer.mozilla.org/ru/docs/Web/API/Range/surroundContents
			}

Live DEMO
выделение текста цветом: https://e-motiv.github.io/hilitor/example
получить текст при клике: www.javascriptkit.com/javatutors/copytoclipboard.shtml

Ps: Удачи вам!

Comments

[Bor1and]

спасибо, помогло. для ангулара 2 необходимо немного переделать в html

<p style="font-size: 35px; font-weight: 600" (mouseup)="lightSelection()">Изменения стиля слова при нажатии на него?</p>
<p (mouseup)="lightSelection()" style="font-size: 20px; font-weight: 400">
Необходимо при клике на слово в тексте, оно выделялось рамкой. Не знаю как это сделать на Angular2. Может кто-то знает как это реализовать?
</p>

[Naim]

Bor1and: я просто пример сделал, а дальше вы сами)))

Удачи вам!