Скопируйте и вставьте форматированный текст со ссылками, но без скрытых стилей и т. Д. c в Javascript - PullRequest
Новая
       109

Скопируйте и вставьте форматированный текст со ссылками, но без скрытых стилей и т. Д. c в Javascript

0 голосов
/ 13 апреля 2020

Я создаю расширение chrome, которое основывается на извлечении выделенного текста со страницы и последующем его отображении.

Мне нужно скопировать абзац текста, подобный этому: 

<span class="padding:0px;>Hello this is a link <a href="/somewhere">somewhere</a></span>

И чтобы вернуть это: 

Hello this is a link <a href="/somewhere">somewhere</a>

Т.е. я хочу получить текст, и такие вещи, как ссылки, LI, UL, Blockquote, но не получить скрытый стиль, и т. Д. c.

Функция, которую я использую в настоящее время: 

function getSelectionText() {
var text = "";
if (window.getSelection) {

  // from here: https://gist.github.com/gleuch/2475825
  // selection range
  var range = window.getSelection().getRangeAt(0);

  // plain text of selected range (if you want it w/o html)
  var plaintext = window.getSelection();

  // document fragment with html for selection
  var fragment = range.cloneContents();

  // make new element, insert document fragment, then get innerHTML!
  var div = document.createElement('div');
  div.appendChild( fragment.cloneNode(true) );

  // your document fragment to a string (w/ html)! (yay!)
  var text = div.innerHTML;
  console.log(text);


} else if (document.selection && document.selection.type != "Control") { // think this is for IE?
text = document.selection.createRange().text;
}
return text;
};

Это захватывает полный фрагмент узла выделения, но иногда захватывает окружающие промежутки, div, стили и т. Д. c.

Есть ли некоторые между? т.е. не просто необработанный текст и не полный HTML?

1 Ответ

0 голосов
/ 14 апреля 2020

Если вы можете перечислить теги, которые хотите удалить, используйте следующую функцию для их удаления: 

function removeTags(tags, html) {
  var els = $(html); // Transform html in a jQuery object
  for (var tag of tags) { // For each tag to be removed
    var el = els.find(tag);
    while (el.length) { // While the tag is found
      el.replaceWith(function() {
        return this.innerHTML; // Remove the tag
      });
      el = els.find(tag); // Find next instance
    }
  }
  return els.html();
}

Назовите это так: 

const tags = ["div", "p"]; // List of tags to be removed
var result = removeTags(tags, html);


function getHTMLOfSelection() {
  var range;
  if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    return range.htmlText;
  }
  if (window.getSelection) {
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
      range = selection.getRangeAt(0);
      var clonedSelection = range.cloneContents();
      var div = document.createElement('div');
      div.appendChild(clonedSelection);
      return div.outerHTML;
    }
  }
  return '';
}

function removeTags(tags, html) {
  var els = $(html);
  for (var tag of tags) {
    var el = els.find(tag);
    while (el.length) {
      el.replaceWith(function() {
        return this.innerHTML;
      });
      el = els.find(tag);
    }
  }
  return els.html();
}

function process() {
  var tags = ["div", "p"];
  document.getElementById("output1").value = getHTMLOfSelection();
  document.getElementById("output2").value = removeTags(tags, getHTMLOfSelection());
}
div,
p {
  display: inline-block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><p>Testing...</p>This <div style="color:blue">text to <a href="test">test</a> the</div> selection on.<div style="color:red">Another div</div></div><br>
<button onclick="process()">Get selected HTML</button> HTML:
<br>
<textarea id="output1" rows="3" cols="60"></textarea>
<br> HTML without tags:<br>
<textarea id="output2" rows="3" cols="60"></textarea>
...