Select part of the text between symbols

  

... the only thing I found about it is looking in the innerHTML for a specific word and adding the span with the style .... Does anyone know how I can do to add certain styles punctually to the words that are between particular symbols ?

In html, you can not change the style of a text block without differentiating it with a label.

Consider this example ...

<p>Lorem Isup, el diablo is malissimo</p>

No you can change the style of "the devil" directly, because the whole text block ("Lorem Isup, the devil is malissimo") will use the same style.

What you have already found is how to modify the punctual style of a certain text.

// html
<p>Lorem Isup, <span class="bold">el diablo</span> is malissimo</p>

// css 
.bold { font-weight: bold; }

Therefore, you can use something like this: With a regular expression, look for the different brands and make the replacement manually. You can also use markdown standard using a well-tested library such as: link

// seleccionas lo que quieres modicar, en este caso 
// use <p> pero puedes usar querySelector para traer
// mas elementos. 
var range = document.getElementsByTagName("p");

for (var i = 0; i < range.length; i++) {
  var matched = range[i].textContent.match(/:(.+?):/g)
  if (matched) {
    matched.forEach(function(text) {
      var newtext = text.substring(1, text.length - 1);
      range[i].innerHTML = range[i].innerHTML.replace(text, '<span class="bold">' + newtext + '</span>');
    });
  }
}

.bold {
  font-weight: bold;
}

<p>Lorem Isup, :el diablo: is malissimo, :tu sabes:</p>

You can use something similar to this:

//texto = "Había :una: vez" simbolo = ":"
var cambiarTexto = function (texto, simbolo) { 
while (texto.indexOf(simbolo)>0) {
    var posicionInicial = texto.indexOf(simbolo);
    var posicionFinal = texto.indexOf(simbolo, posicionInicial+1);
    var textoEntreSimboloOriginal = texto.substring(posicionInicial, posicionFinal+1);
    var textoEntreSimbolo = texto.substring(posicionInicial+1, posicionFinal);
    texto = texto.split(textoEntreSimboloOriginal).join("<span class='miestilo'>" + textoEntreSimbolo + "</span>");
}
return texto;// Resultado = Había <span class='miestilo'>una</span> vez   
}

then you just have to modify the element that has that text that you want to modify. for example:

var remplazoGeneral = function () {

document.body.innerHTML = cambiarTexto(document.body.innerHTML, ":");
}

First of all, thanks for the comments, I wanted to tell you that I found a way, which I think (at least for me) is easier, from PHP with BBCode.

PHP

<?php

  if(isset($_POST['texto'])){
    $texto = $_POST['texto'];
    $texto = stripslashes($texto);
    $texto = htmlspecialchars($texto);
    $texto = nl2br($texto);

    $texto = preg_replace('#\:(.+)\:#isU', '<b>$1</b>', $texto);

    echo $texto;
  }
?>

That's the code I'm using, in the 'index.php'. I explain (as I can) the code.

The stripslashes () function removes backslashes from the string, in this case $ text, to avoid conflicts later with 'preg_replace ()'.

The htmlspecialchars () function escapes the special characters in html entities, for example, the & character converts it to & amp .

The nl2br () function is similar to htmlspecialchars (), the function would read 'Ene ele to be ere' haha, that is, somehow \ n - > br , so these three functions, what they do is translate the string entered, in HTML.

Now, the most important, preg_replace () :

This function, looks for a regular expression (first parameter) and replaces them with the desired (second parameter), explains a little the first one.

'#\:(.+)\:#isU'

I will explain (I repeat, as I can) the first parameter, which is the pattern, this is defined between # . Then, it is indicated between what symbols must be the expression to replace, in this case they are ":" , and the character escapes with the backslash. Finally, the series of symbols (. +) , from what I understand, would be interpreted as "any word / s", so "All the string that is between : , it will be replaced by the second parameter, and we end this part of the code with #isU which I will not explain because I really do not know, I do not want to give information wrong haha.

Now the second parameter, 'For that is going to replace the first one'. As you can see, in my code I used the following:

<b>$1</b>

As you can see, where would go the word we want to appear in bold, there is a $ 1 , basically it is a variable, which represents the first regular expression entered.

This gives us the footing for the third parameter, the string we were using, which in this case, was $ text . I can not explain much of the third parameter because really, I'm not sure how it works, if someone wants to contribute something else, it's welcome.

And in HTML, the form is as follows:

HTML

<form action='index.php' method='POST'>
  <textarea name='texto'></textarea>
  <input type='submit' value='Enviar'>
</form>

It should be noted that the name = 'text' is the value that is sent to $ _ POST ['text'] .

I ask you to have mercy on my explanation, I wanted to say it as clearly as possible, I'm a bit amateur with this, and particularly, BBCode , I met him 30 minutes ago. If someone sees an error in what I said, please ask me to clarify it, we all learn from our mistakes, and I particularly, trial and error!.

I hope it serves someone, and thank you very much again to those who answered me. Greetings!