3

Tengo un problema. Dentro de una tabla, irán unos textos sacados de unas variables, cómo hago para leer 'x' número de caracteres y añadir unos espacios en blanco después?.

Ej.:

01. Escritura natural de idiomas.

Ej.: cómo debe quedar:

01.     Escritura natural de idiomas.

Cómo debo formular para añadir esos espacios tras leer dichos primeros caracteres? Gracias de ante mano!.

function generatePageLinks(text, isChapter, pageId) {
       // text = variable con cadena de texto de título.
    var $element = $(document.createElement('td')),
        $link = $("<a></a>").text(text).attr('href', '#').attr('data-page-id', pageId);

    $element.append($('<div class="text-wrapper">').html(isChapter ? text : $link));
    //Mete dicho texto dentro de las etiquetas <a>
    return $element;

}

Y esto es lo que crea en el html:

<a data-page-id="04. Contenido_solapas" href="#">04. Contenido_solapas</a>

Gracias al compañero de abajo, ésta ha sido la solución final, para poder manipular los espacios :)

$element.append('<div class="text-wrapper">');
$element.append($("<pre></pre>").html(isChapter ? text : $link));
return $element;

5 respuestas 5

5

Para hacerlo más automatizado, crea una función que reciba:

  1. El texto original a editar
  2. El punto de quiebre o posición en la que se añadirán los espacios.
  3. Cantidad de espacios a añadir.

function fillWithSpaces(text, breakpoint, spacesQty) {
  if(breakpoint < 0) { throw new Error("Invalid break position"); }
  let leftPart = text.substring(0, breakpoint);
  let rightPart = text.substring(breakpoint);
  [...Array(spacesQty)].map((i) => {
    leftPart += " ";
  });
  return leftPart + rightPart;
}

let originalText = "01. Escritura natural de idiomas.";
let customText = fillWithSpaces(originalText, 3, 5);
document.querySelector('pre').innerText = customText;
<pre></pre>

Actualización 2

Tu código se puede segmentar para mejor legibilidad. Simplemente crea los elementos td y a y <div class="text-wrapper">. Añade los atributos a a y de acuerdo a si es capítulo, añades solo el texto o el link respectivamente.

var element = document.createElement('td');
var link = document.createElement('a');

$(link)
  .attr('data-page-id', id)
  .attr('href', '#')
  .append('<pre>')
  .find('pre')
  .append(text)
  .find('a');

var wrapper = $(element)
              .append('<div class="text-wrapper">')
              .find('div');
if(isChapter){
  $(wrapper).append(text);
} else {
  $(wrapper).append(link);
}
return element;
12
  • Buenas, he probado todas y cada una de las fórmulas y mientras que en local si me funciona con cualquier editor de html, una vez lo subo al gestor de contenidos, no hace nada. Desde el inspector si veo que aplica los espacios pero visualmente no más de uno. Se me ha ocurrido una cosa, y si creara un elemento como un span, le asignara una clase y lo pusiera justo después de esos 3 caracteres y así desde CSS con 'after' y jugando con el content, lo desplazo tantos caracteres como necesite?
    – djohny
    Commented el 24 jun. 2016 a las 15:07
  • También lo puedes hacer como comentas. ¿Te aseguraste de usar <pre> en lugar de <p> en producción? Porque con <p> solo toma un espacio.
    – gugadev
    Commented el 24 jun. 2016 a las 15:10
  • Si lo que me crea ésto en tiempo de ejecución es una etiqueta de enlace <a></a> y dentro mete el testo que captura desde el pageTitle (las variables que contienen cada título).
    – djohny
    Commented el 24 jun. 2016 a las 15:13
  • Sería bueno si colocas un poco más de código en tu pregunta para entender mejor.
    – gugadev
    Commented el 24 jun. 2016 a las 15:14
  • Acabo de editar mi pregunta original, para que veas la función que captura dicho objeto. Lo que hace es crear esos elementos,y añadir un link y un texto que es la variable que captura el identificador de la página. Es difícil de explicar ya que no es una web normal.
    – djohny
    Commented el 24 jun. 2016 a las 15:32
5

Lo he hecho buscando el primer espacio que me parece más sencillo que contar carácteres, a ver si te sirve:

   var str = document.getElementById("parrafo").innerHTML;
   var str2 = str.replace(" ", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
   document.getElementById("parrafo").innerHTML = str2;
<p id="parrafo">01. Escritura natural de idiomas.</p>

2
  • Pues es perfecta y me la guardo también si de cierta manera pudiera acceder a ese contenedor pero no es posible, necesito hacerlo capturando la variable del texto que irá en el TD. Es que ésto es un gestor de contenidos y hacerlo de esa forma, no puedo o no he dado con ello. Me lo guardo insisto en si puedo modificarlo o acceder de alguna forma, pero necesito hacerlo vía variable :(
    – djohny
    Commented el 24 jun. 2016 a las 13:09
  • No entiendo muy bien el problema, yo he extraido el texto de un elemento html pero se guarda en una variable para operar con él, puedes usar tu variable igual ¿o me estoy perdiendo algo? De todos modos la solución de Fabio me mola más
    – user7176
    Commented el 24 jun. 2016 a las 13:32
4
var str="01. Escritura natural de idiomas.";

var str2 = str.slice(0, 3) + "   " + str.slice(3);

El resultado:

01.    Escritura natural de idiomas.

str.slice devuelve los elementos seleccionados de una matriz, como un nuevo objeto de matriz, seleccionando los elementos desde los argumentos dados (0,3) para el primer caso y el segundo slice que comienza del (3) hasta el fin

1
  • str.slice devuelve los elementos seleccionados de una matriz, como un nuevo objeto de matriz. seleccionando los elementos desde los argumentos dados (0,3), el segundo slice comienza del (3) hasta el fin Commented el 24 jun. 2016 a las 13:15
3

Con una expresion regular es bastante simple. El metodo replace te permite sustituir el fragmento de la cadena de caracteres.

Coincide los 3 primeros caracteres, agrega espacios y luego pon el resto de la cadena de entrada.

var spaces = '   ';
// En ES6 puedes usar
// var spaces = ' '.repeat(3);
var source = 'Lorem ipsum dolor amet';
var source2 = '01. Escritura natural de idiomas.'

var result = source.replace(/^(.{3})(.*)$/, '$1' + spaces + '$2');
var result2 = source2.replace(/^(.{3})(.*)$/, '$1' + spaces + '$2');

alert(result);
alert(result2);

2

Puedes utilizar javascript de esta manera:

var str = "Hello world!";
var res = str.substr(1, 4) + " ";//Un espacio en blanco

Resultado

ello 

Espero que te sirva

2
  • Mmm no exactamente pero me lo guardo para otra ocasión. Lo que necesito no es capturar esos caracteres sino añadir espacios en blanco entre hello y word en éste caso, pero claro, el texto variará porque lo captura de lo que nosotros metamos. Entonces, la idea es la que tengo en mi ejemplo, que lea sea cuales sean los primeros 3 caracteres de lo que haya en el TD de una tabla, y meta a continuación un número determinado de espacios en blanco.
    – djohny
    Commented el 24 jun. 2016 a las 12:12
  • Seria algo similar: str.substr (0, 3) + " " + str.substr (3). No puedo probarlo ahora, si no es exacto juega con los índices. Commented el 24 jun. 2016 a las 12:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.