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: Удачи вам!