Mudar cor de texto selecionado

[lucianfpaula 0]

Olá saudações, tenho a seguinte duvida, dentro de uma div vou ter varios campos de texto, seja h1, p, smaill etc.. a minha duvida é a seguinte: como manipular a cor de um texto selecionado, tipo tenho um <h1>Minha texto que pode ser grande, quero mudar essa cor</h1> tem varios editor que usam textarea, mas queria saber se é possivel fazer isso a partir de qualquer tag. tipo seleciono o texto e clico em um botão com a cor que quero e mude o texto selecionado.

 

Muito obrigado

[wanderval 19]

tem como sim mas você terá que fazer alguns tratamentos vou deixar um exemplo aqui:

 

Lembrando que mesmo aparentemente funcional esse script tem uma falha de não remover os elementos criados se o mesmo texto sofrer outra alteraçao então se for ver pelo inspect element ira ver que sempre será gerado um elemento 'span' independente se já existe um parent encapsulando o mesmo range mas pra um exemplo acho que esse script já vai ajudar muito

 

HTML:

<div class="main-container">
  <span>text 1</span>
  <p>text 2</p>
  <p>
    this is text, select and right click to high light me! if you can`t see the option, please use this
  <p>
</div>

<button onclick="highlightSelection('red')">red</button>
<button onclick="highlightSelection('blue')">blue</button>

 

JS:

function highlightSelection(color) {
  var userSelection = window.getSelection();
  
  for(var i = 0; i < userSelection.rangeCount; i++) {
    highlightRange(userSelection.getRangeAt(i), color);
  }

}

function highlightRange(range, color) {
  var newNode = document.createElement("span");
  newNode.className = 'text-color';

  newNode.setAttribute(
    "style",
    "color:"+color+"; display: inline;"
  );
  range.surroundContents(newNode);
}

 

JSBin: https://jsbin.com/haciyozezi/edit?html,js,output

[lucianfpaula 0]

Ajudou bastante, obrigado