Home / Questions / 96078
Accepted
Ivan Botero
Asked: 2020-08-20 07:43:18 +0800 CST 2020-08-20 07:43:18 +0800 CST

onClick event assignment using text replacement

  • 772

Code

/**
 * Arreglo de telefonos
 */
var telefonos = [
  "316 841 1233",
  "321 876 5432",
  "318 220 0880",
  "313 123 4567",
  "315 321 7654",
  "315 366 6666",
  "2874566",
  "2661588",
  "2662255",
  "3153274802",
  "2771521"
];

$(document).ready(function() {

  /* Elementos */
  var body = document.body;
  var html = body.innerHTML;

  var htmlModificado;

  /* Buscamos cada telefono del arreglo */
  telefonos.forEach(function(telefono) {

    /* Creamos la etiqueta "phone" */
    var phone = crearPhone(telefono);

    htmlModificado = html.replace(telefono, phone.outerHTML);
    body.innerHTML = htmlModificado;

    html = body.innerHTML;

  });

});

function generarMensaje(elemento) {
  console.log("Enviando mensaje a " + elemento.innerHTML);
}

function crearPhone(telefono) {

  var phone = document.createElement("phone");

  phone.innerHTML = telefono;

  phone.setAttribute("class", "enlace");
  phone.onclick = function() {
    generarMensaje(this);
  }

  return phone;
}
.enlace {
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
  color: blue;
}

.enlace:hover {
  text-decoration: none;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenido">
  <div>
    <div>316 841 1233</div>
    <div>321 876 5432</div>
    <div>318 220 0880</div>
  </div>
  <div>
    <a>313 123 4567</a>
    <br>
    <a>315 321 7654</a>
    <br>
    <a>315 366 6666</a>
  </div>
  <div>
    2874566 - 2661588 - 2662255
  </div>
  <div>
    3153274802 - 2771521
  </div>
</div>

Context

I am working on a Chrome extension, which will be in charge of making certain modifications in the DOM of a site, looking for some texts and replacing them with certain custom labels, which will allow to carry out some specific actions.

That is, the extension will do this:

1) Find a text where the word "love" is

<a>Hay amor en el aire.</a>

2) Add the custom label

<a>Hay <palabra onclick="buscar()">amor</palabra> en el aire.</a>

Goal

In the previously exposed example, I need to do the following:

Having a site, with a list of numbers at different levels and within different tags within the DOM, I will base myself on an array that contains these numbers, and I will look for them one by one, I will enclose them in a custom tag called <phone>, allowing each one of these numbers have a different action than the rest of the surrounding text.

Problem

In this section of my code:

function crearPhone(telefono) {

  var phone = document.createElement("phone");

  phone.innerHTML = telefono;

  phone.setAttribute("class", "enlace");
  phone.onclick = function() {
    generarMensaje(this);
  }

  return phone;
}

I create the function to which I will indicate the number that we are going to enclose in the label <phone>, assigning the class, the event, there onclick.

If the code is executed, all the phone numbers have changed color successfully, the problem is that none of them execute the function that was assigned during the onclick:

  phone.onclick = function() {
    generarMensaje(this);
  }

Therefore the code does not print any messages or errors to the console.

Note

It should be clarified that I must solve the problem using pure JavaScript , it does not help me to use a library such as jQuery or others, since in said environment I cannot use it.

javascript

1 Answers

  1. Best Answer

    The problem is Phone.outerHTMLthat since it doesn't serialize events to the DOM, the do phone.onclick = ...affects the DOM element but not its serialized HTML element.

    Solution

    replace phone.onclickwithphone.setAttribute('onclick',...)

    function crearPhone(telefono) 
{
  var phone = document.createElement("phone");
  phone.innerHTML = telefono;
  phone.setAttribute("class", "enlace");
  phone.setAttribute("onclick", 'generarMensaje(this)');
  return phone;
}

    A better alternative

    Since you're working on serialized elements, they still need to be parsed by DOM.parser , either directly or indirectly with the innerHTML / outerHTML sets . It's best to directly edit the DOM instead of the serialized html.

    ;(function(global, d)
{
"use strict"

  var telefonos = [
    "316 841 1233"
    ,"321 876 5432"
    ,"318 220 0880"
    ,"313 123 4567"
    ,"315 321 7654"
    ,"315 366 6666"
    ,"2874566"
    ,"2661588"
    ,"2662255"
    ,"3153274802"
    ,"2771521"
  ]
  
  function crearTelefono(telefono)
  {
    var p = d.createElement('phone')
    p.appendChild(d.createTextNode(telefono))
    p.classList.add('enlace')
    p.onclick = generarMensaje
    return p
  }
  
  function generarMensaje(elemento) {
    console.log("Enviando mensaje a " + elemento.target.firstChild.nodeValue);
  }
  
  function reemplazar_telefonos()
  {
    reemplazar_telefonos_aux(document.body);
  }
  
  function reemplazar_telefonos_aux(node)
  {
    for (var h of node.childNodes)
      {
        if (h.nodeType == Node.TEXT_NODE)
         {
           analizar_y_reemplazar(h)
         }
        else if (h.nodeType == Node.ELEMENT_NODE 
                 && h.nodeName != 'SCRIPT' 
                 && h.nodeName != 'STYLE'
                 && h.nodeName != 'PHONE')
         {
           reemplazar_telefonos_aux(h)
         } 
      }  
  }
  
  function analizar_y_reemplazar(tnode)
  {
    var s = tnode.nodeValue
    var p = tnode.parentNode, i
    
    for (var telefono of telefonos)
      {             
        while ((i = s.indexOf(telefono)) >= 0)
          {
            var a = s.slice(0, i)
            s = s.slice(i + telefono.length, s.length)
            if (a)
              { 
                p.insertBefore(d.createTextNode(a), tnode)  
              }
            p.insertBefore(crearTelefono(telefono), tnode)
          }
      }
      tnode.nodeValue = s 
  }
  
  global.addEventListener('DOMContentLoaded', reemplazar_telefonos, false)
  
}(window, document))
    .enlace {
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
  color: blue;
}

.enlace:hover {
  text-decoration: none;
  color: red;
}
    <div id="contenido">
  <div>
    <a>313 123 4567</a>
    <br>
    <h3> El numero es: 313 123 4567 </h3>
    <a>315 321 7654</a>
    <br>
    <a>315 366 6666</a>
  </div>
  <div>
    <em> Texto con enfásis 2874566 </em> <br> <span style="color:red"> rojo 2661588 </span> - 2662255
    <ul>
      <li><span style="color:green"> verde 2874566 </span></li>
      <li><span style="color:cyan"> cyan 315 366 6666</span></li>
    </ul>
  </div>
  <div>
    <span style="color:pink"> Rosado 3153274802 - 2771521 </span>
  </div>
</div>

    What the above code does is recursively parse all the text, to any depth, replace that text with an element phone( UnknownHTMLElement ) and finally make the node a dummy node (empty), the reason for the dummy node is to simplify the code

    • 1