Resaltar texto en TextArea-Highlight-TA. js

Vista prévia

Descripción

Highlight-TA. js es una librería JavaScript pura que permite aplicar diferentes estilos CSS en caracteres específicos dentro de tu elemento TEXTAREA usando RegExp. También tiene la capacidad de ajustar dinámicamente la altura de la TextArea para ajustarse a su contenido.

Funcionamiento

Importa los archivos JavaScript de Highlight-TA en la Página Web.

<script src="highlight-ta.js"></script>
<script src="highlight-ta-proto.js"></script>

Agregue el ID de CSS a su elemento TEXTAREA y, a continuación, envuélvalo en un contenedor DIV como este:

<div id="highlight-div" class="my-class">

<textarea id="highlight-ta"></textarea>
 </div>

Cree una expresión regular e inicialice/Cree instancias de objetos prototipo:

var re = new RegExp('WikiCSS', 'g');
var taHlght = highlightta(document.getElementById('highlight-div'),
 document.getElementById('highlight-ta'), "mark-style", re);

Esto enmarcará el carácter ' WikiCSS ' en la etiqueta Mark con la clase CSS de ' Mark-Style '. A continuación, puede estilo el carácter lo que quiera:

.mark-style {

...
}

Métodos de la API:

// Initialize or reset the textarea with init():
hlghtTa.init(div, ta, re, dclr);
hlghtTa.init(div, ta, re, dclr, false);

// Turn corners off:
hlghtTa.corners();
hlghtTa.corners(false);

// Release testarea from HighlightTa:
hlghtTa.remove();

// Get the text:
hlghtTa.getText();

// Get the CSSStyleDeclaration object:
hlghtTa.getComp();

// Set the z-index:
hlghtTa.setZ(2); //use a number
hlghtTa.setZ("2"); //or use a string

// Set the class for mark:
hlghtTa.setMark("class-name");

// Set the RegExp with JavaScript RegExp object:
hlghtTa.setRegex(RegExp);