Introducción a JavaScript - cadenas de texto

En este ejemplo se muestran ejemplos sencillos del empleo de cadenas de texto en JavaScript

Cadenas y conversión

<script>

let u;
const x = 5;
const y = 10;
let cad = "Suma";
document.write("<code>cad + x + y</code> sería: " + cad + x + y + "<br>");
document.write("<code>cad + (x + y)</code> sería: " + cad + (x + y) + "<br>");
document.write("<code>x.toString()</code> sería: " + x.toString() + "<br>");
document.write("<code>String(x)</code> sería: " + String(x) + "<br>");
document.write("<code>String(u)</code> sería: " + String(u) + "<br>");
try {
  document.write("<code>u.toString()</code> sería: " + u.toString() + "<br>");
} catch (e) {
  document.write("Como u es undefined daría un TypeError si no estuviera en un try-catch
El mensaje del error es:" + e.message);
}

Propiedades y métodos de las cadenas

Longitud

<script>

<form oninput="longitud.value=user.value.length">
    <label>Usuario: <input id="cadena" type="text" name="user" onchange="forms"></label><br>
    <label>Longitud:<output name="longitud" for="cadena"></output></label>      
</form>

Búsqueda de subcadenas

<script>

cad = "¡Busca el oro! ¡Quiero oro!";
let subcadena = "oro";
var pos = cad.indexOf(subcadena);
document.write("Buscamos con indexOf() en la variable <var>cad</var> que contiene \"<i>" 
    + cad 
    + "\"</i> la primera aparición de <i>\"" 
    + subcadena 
    + "\"</i> y está en la posición <em>" 
    + pos 
    + "</em><br>");
pos = cad.indexOf(subcadena,11);
document.write("Buscamos con indexOf() y offset 11 en la variable <var>cad</var> que contiene \"<i>" 
    + cad + "\"</i> la primera aparición de <i>\"" 
    + subcadena 
    + "\"</i> y está en la posición <em>" 
    + pos 
    + "</em><br>");
pos = cad.lastIndexOf(subcadena);
document.write("Buscamos con lastIndexOf() en la variable <var>cad</var> que contiene \"<i>" 
    + cad 
    + "\"</i> la última aparición de <i>\"" 
    + subcadena 
    + "\"</i> y está en la posición <em>" 
    + pos 
    + "</em><br>");
pos = cad.search(subcadena);
document.write("Buscamos con search() en la variable <var>cad</var> que contiene \"<i>" 
    + cad 
    + "\"</i> la primera aparición de <i>\"" 
    + subcadena 
    + "\"</i> y está en la posición <em>" 
    + pos 
    + "</em><br>");

Espresiones regulares

<script>

let output = document.getElementById("output");
let ptexto = document.getElementById("texto");
let texto = ptexto.innerHTML;
let posicion = document.getElementById("posicion");
function update(text) {
    let regexp = new RegExp(text, 'i');
    let pos = texto.search(regexp);
    let otra = texto.slice(0, pos) 
             + "<span class='resaltar'>" 
             + texto.slice(pos, pos + text.length) 
             + "</span>" 
             + texto.slice(pos + text.length, texto.length);
    console.log("Posicion:" + pos);
    posicion.innerHTML = pos;
    output.innerHTML = "/" + text + "/i";
    ptexto.innerHTML = otra;
}

Más información aquí

Busque patrones en este texto de ejemplo en que deberá o podrá buscar de manera independiente de las mayúsculas

Patrón:
Encontrado en la posición:

Extracción de partes

<script>

let recortar = document.getElementById("recortar").innerText;//Con HTMLElement no extraigo las marcas, si las hubiera, solo en texto
let recorte1 = document.getElementById("recorte1");
let recorte2 = document.getElementById("recorte2");
let recorte3 = document.getElementById("recorte3");
function recorta(a, b) {
    recorte1.innerHTML = recortar.slice(a, b);
    recorte2.innerHTML = recortar.substring(a, b);
    recorte3.innerHTML = recortar.substr(a, b);

}

El ejemplo anterior también se puede ver el efecto del método slice(incio,fin)

Este texto se podrá recortar con las tres funciones típicas

Recorte con slice(a,b)

Recorte con substring(a,b)

Recorte con substr(a,b)

Reemplazar

<script>

var str = "Servicios y Aplicaciones Telemáticas<br>";
document.write(str.replace("y", "&"));
document.write(str.replace("APLICACIONES", "Programas"));//Este falla
document.write(str.replace(/APLICACIONES/i, "Programas"));//Este sí
document.write(str.replace(/s/g, ""));

Ejemplo de reemplazo replace(buscado,nuevo)

Convertir una cadena en un array

<script>

let separar = document.getElementById("separar").innerText;
let separados = document.getElementById("separados");
function separa(a) {
    console.log("Separar por " + a);
    let trozos = separar.split(a);
    separados.innerHTML = "";
    for (let trozo of trozos) {
        separados.innerHTML = separados.innerHTML + trozo + "<sbr>";
    }
}

Ejemplo de conversión de cadenas en arrays con split(separador)

{1,2,3};{2,4,5};{56,12,45}

Inicio