2

Estoy intentando obtener el código HTML del texto que seleccione un usuario.

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
      var sel = window.getSelection();
      if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
          container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        html = container.innerHTML;
      }
    } else if (typeof document.selection != "undefined") {
      if (document.selection.type == "Text") {
        html = document.selection.createRange().htmlText;
      }
    }
    alert(html);
  }
<div onmouseup="getSelectionHtml()"><span>Lorem ipsum dolor sit amet</span>, <i>consectetur adipiscing elit.</i> <b>Proin finibus laoreet dolor, sed vestibulum</b> mi suscipit id. Donec molestie lectus non neque fringilla, id pulvinar dui suscipit. <i>Etiam congue diam pellentesque finibus congue. Mauris varius faucibus ipsum, vitae consectetur mauris eleifend ac.</i> Quisque dignissim tincidunt dolor, quis molestie ex. Morbi molestie odio et viverra mattis. <b>Proin libero dolor, tincidunt sit amet magna id, semper porta nisl. Duis congue nulla risus, at molestie neque sodales ut.</b> Nam sit amet condimentum dolor. Fusce ullamcorper nibh ac laoreet euismod. Sed vel quam neque. Cras posuere neque at ex accumsan, sed vehicula velit scelerisque. </div>

Tengo la siguiente función pero añade una etiqueta de inicio en caso que se encuentre dentro de otra. Habría alguna forma de obtener el código HTML exacto del código seleccionado?

Por ejemplo, si yo selecciono "adipiscing elit. Proin finibus"(primera línea) mi función devuelve lo siguiente:

<i>adipiscing elit.</i> <b>Proin finibus</b>

Lo que quiero que me devuelva es:

adipiscing elit.</i> <b>Proin finibus

Actualmente me añade etiquetas de inicio y cierre, lo que quisiera es que en caso de que no lo seleccione desde el principio, no muestre estas etiquetas de inicio y cierre.

2
  • que? podrias dar un ejemplo de entrada y salida. al parecer la funcion ya realiza lo que deseas.
    – Shassain
    Commented el 20 jul. 2020 a las 13:43
  • Acabo de añadir un ejemplo 👍 Commented el 20 jul. 2020 a las 14:03

1 respuesta 1

1
+50

puedes hacerlo asi:

   function getSelectionHtml(e) {
    let html = "";
    let fulltext = e.innerHTML;
    if (typeof window.getSelection != "undefined") {

      let sel = window.getSelection();

        if (sel.anchorNode && (sel.anchorNode == sel.extentNode)) {
            if (sel.toString() == sel.anchorNode.textContent) {
              html = sel.anchorNode.parentElement.outerHTML;
            }
          }

 
      if (sel.rangeCount) {
        let container = document.createElement("div");
        for (let i = 0, len = sel.rangeCount; i < len; ++i) {
          container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        html = container.innerHTML;
      }
    } else if (typeof document.selection != "undefined") {
      if (document.selection.type == "Text") {
        html = document.selection.createRange().htmlText;
      }
    }


    // si la porcion del texto no se encuentra
    // en la cadena completa

    if(fulltext.indexOf(html) === -1){
        let tmp = html

        // coincida sin en el ultimo tag
        if( fulltext.indexOf(html.replace(/<[^>]*>$/,"")) !== -1 ){
            tmp = html.replace(/<[^>]*>$/,"")
        }

        // coincida sin el primer tag
        else if( fulltext.indexOf(html.replace(/^<[^>]*>/,"")) !== -1 ){
            tmp = html.replace(/^<[^>]*>/,"")
        }

        // coincida sin el primer y ultimo tag
        else if( fulltext.indexOf(html.match(/^<[^>]*>(.*?)<[^>]*>$/,"")[1]) !== -1 ){
            tmp = html.match(/^<[^>]*>(.*?)<[^>]*>$/,"")[1]
        }

        html = tmp
    }
   // console.log(html)
    alert(html);
  }
<!-- le pasamos como paramentro al propio elemento con this-->
<div onmouseup="getSelectionHtml(this)"><span>Lorem ipsum dolor sit amet</span>, <i>consectetur adipiscing elit.</i> <b>Proin finibus laoreet dolor, sed vestibulum</b> mi suscipit id. Donec molestie lectus non neque fringilla, id pulvinar dui suscipit. <i>Etiam congue diam pellentesque finibus congue. Mauris varius faucibus ipsum, vitae consectetur mauris eleifend ac.</i> Quisque dignissim tincidunt dolor, quis molestie ex. Morbi molestie odio et viverra mattis. <b>Proin libero dolor, tincidunt sit amet magna id, semper porta nisl. Duis congue nulla risus, at molestie neque sodales ut.</b> Nam sit amet condimentum dolor. Fusce ullamcorper nibh ac laoreet euismod. Sed vel quam neque. Cras posuere neque at ex accumsan, sed vehicula velit scelerisque. </div>

2
  • Buena idea, aunque ahora mismo seleccionando "tis. Proin libero", en la quinta línea, no esta cogiendo el string seleccionado completo. Commented el 20 jul. 2020 a las 15:52
  • si ya vi el error, dame un segundo y te lo corrijo
    – Bryro
    Commented el 20 jul. 2020 a las 16:19

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.