How to separate the text from another

Question

How to separate the text from another

Navigation

#1 by (1 votes)

2

If I create a text in the following way:

function urlify(text) {
    var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?  =~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    });
}

document.addEventListener("DOMContentLoaded",function(){
var m = document.getElementById("m");
var t = prompt('Ingresa texto','Texto:');
var p = "";
var nombre = prompt('nombre de usuario','');
var testd = urlify(t);
if(testd.indexOf('href="') != -1) {
p = document.createElement("A")
}
else {
p = document.createElement("P")
}
var texto = document.createTextNode(nombre + ": " + testd);
p.style.color = "white";
p.appendChild(texto);
m.appendChild(p);
});

#m {width:300px:height:200px;background-color:rgba(21,21,21,0.75)}

<div id="m">



</div>

I explain:

I create the controller addEventListener , to execute when all the elements are loaded, I define m that is the div, I define t that is the text that I will enter, I define p that will be a createElement , according to a IF , this if will be true according to a funcion that verify if it is a link of type link , if true is verified, create an A element , < strong> but a P , then I create the text with createTextNode and in the arguments, I pass the name , a separator ": " and the < strong> text , so it would look like:

User: message

The problem is that how can I make the name appear OTHER than the message, and also when I try to CREATE element A, it does not appear as LINK

javascript

asked by Eduardo Sebastian 28.07.2017 в 01:25

source

1 answer

Two applications on the same server and the connections to BD are crossed Fill combobox with database, but start with white

score 1 · Answer 1

I see some problems:

With the urlify function, if it is a url, you transform it to a string of type <a href="url">url</a> . And when creating a text node with createTextNode , that string will not be transformed to a link, but will remain as literal text. It could be interpreted as an element (and see the link) if you add it with innerHTML to the element instead of creating a text node.

Solution: Add the text as a text node only if it is not a link, and use innerHTML only if it is a valid URL and it has been processed as such (note: this method is not the best because it can suffer attacks from XSS, you'd better change urlify so that it returns true / false and create a link properly).

Even if the url were returned as a a element, a a would be created to which you are not assigning any href , so it would not be shown as a link. And in addition, the HTML generated would be invalid, because then you would have a a within another a (in the form <a>usuario <a>url</a></a> ) and the result might not be as expected.

Solution: You do not need to create a a element if it is a URL, you have already created the a element if it is a link in urlify. Always create a p .

In order for the user name to be shown in a different color, you will have to wrap it in your own label. This is because in CSS there is no (at least for now) a selector for the first word of the phrase.

Solution: create a span element and wrap the user's name with it. With CSS give styles to that span so that it looks differently.

Then the changes to be made would be:

function urlify(text) {
  var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?  =~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
  });
}

document.addEventListener("DOMContentLoaded", function() {
  var m = document.getElementById("m");
  var t = prompt('Ingresa texto', 'Texto:');
  var p = "";
  var nombre = prompt('nombre de usuario', '');
  var testd = urlify(t);
  p = document.createElement("P")
  
  // creamos y rellenamos un span para el nombre del usuario
  var nombre_tag = document.createElement("span");
  var nombre_txt = document.createTextNode(nombre);
  nombre_tag.className = "nombre-usuario";
  nombre_tag.appendChild(nombre_txt);
  p.appendChild(nombre_tag);
  
  // dependiendo del valor devuelto por urlify creamos un enlace o no
  if (testd.indexOf('<a href="') != 0) {
    var texto = document.createTextNode(": " + testd);
    p.appendChild(texto);
  } else {
    p.innerHTML += ": " + testd;
  }
  
  p.style.color = "white";
  m.appendChild(p);
});

#m {
  width: 300px:height:200px;
  background-color: rgba(21, 21, 21, 0.75)
}

.nombre-usuario {
  color: rgba(255, 255, 0, 0.85);
}

<div id="m">



</div>