Javascript - вырезать определенные строки из результата ".innerHTML" - PullRequest
Новая
       17

Javascript - вырезать определенные строки из результата ".innerHTML"

0 голосов
/ 31 января 2019

У меня есть функция, которая запускается при нажатии кнопки.Эта функция получит весь HTML внутри определенного элемента.Это отлично работает.Однако я хотел бы очистить возвращенную строку (HTML), прежде чем использовать ее в своей функции: 

exportHTML(){
  const element = document.getElementById('content');
  const innerHTML = element.innerHTML;
}

Это работает.Но благодаря использованию Angular синтаксис Angular включен в HTML на основе условий в исходном коде.Например: 

<div _ngcontent-c1=""></div>

ИЛИ 

<div ng-reflect-klass="panel album"></div>
<div ng-reflect-ng-class="blue"></div>

Возможно ли вообще отфильтровать эти типы значений?Что касается второго и третьего приведенного выше примера, классы в них довольно часто меняются:

  1. Можно ли отфильтровать и удалить весь текст _ngcontent-c1 = ""
  2. Можно ли отфильтровать и удалить все ng-refle-klass & ng-refle-ng-class , включая следующие открытые и закрытые кавычки (удалитьчто внутри)

Ответы [ 4 ]

0 голосов
/ 31 января 2019

Я создал JSFiddle в качестве примера того, как сделать это без использования jQuery.

Используя приведенный ниже код HTML в качестве примера 

<div id="origin-content">
  <div id="div1" _ngcontent-c1="">Content 1</div>
  <div id="div2" ng-reflect-klass="panel album">Content 2</div>
  <div id="div3" ng-reflect-ng-class="blue">Content 3</div>
</div>
<hr>
<div id="target-content">
</div>

Я извлеквсе дети из origin-content и скопировали их в target-content, используя следующий код. 

var result = document.getElementById('target-content');
var elems = document.querySelector('#origin-content').children;
var count = elems.length;

for (var i = 0; i < count; i++) {
  var val = elems[i];
  val.removeAttribute('_ngcontent-c1');
  val.removeAttribute('ng-reflect-klass');
  val.removeAttribute('ng-reflect-ng-class');
  result.innerHTML += val.outerHTML;
}

Есть еще много возможностей для улучшения.

Я надеюсь, что это поможет решитьОП вопрос.

0 голосов
/ 31 января 2019

Вы можете сделать это с помощью RegExp 

const innerHTML = element.innerHTML.replace(/ (_ngcon|ng-).*?".*?"/g, '');
  1. (_ngcon|ng-) найти _ngcon или ng-, включая пробел в качестве первого символа
  2. .*?" соответствовать всему до первого"
  3. .*?" и снова сопоставьте все для закрытия "
0 голосов
/ 31 января 2019

Следующее решение удалит все атрибуты из элемента:

Сначала вы можете получить все children.Затем переберите их с помощью forEach().В каждой итерации вы можете использовать , в то время как цикл до removeAttribute(), пока они не существуют в элементе.

Попробуйте следующим образом: 

function exportHTML(){
  const element = document.getElementById('content');
  const innerHTML = [].slice.call(element.children);
  innerHTML.forEach(function(el){
    while(el.attributes.length > 0)
      el.removeAttribute(el.attributes[0].name); 
  });
  console.log(document.getElementById('content').innerHTML); // output
}

exportHTML();
<div id="content">
  <div _ngcontent-c1=""></div>
  <div ng-reflect-klass="panel album"></div>
  <div ng-reflect-ng-class="blue" another-test></div>
  <span test="test-element"></span>
</div>
0 голосов
/ 31 января 2019

ОК, поэтому атрибуты будут постоянными, но значения атрибутов будут меняться?Если это так, вы можете попробовать это:

.replace (/ ng-refle-klass = \ ". ? \" /, ""). Replace (/ ng-refle-ng-class =\ ". ? \" /, ""). Replace (/ _ ngcontent-c1 = \ ". *? \" /, "") 

var content = 'stuff<div ng-reflect-klass="panel album"></div><div ng-reflect-ng-class="blue"></div><div _ngcontent-c1=""></div>end stuff';

console.log(content.replace(/ng-reflect-klass=\".*?\"/g,"").replace(/ng-reflect-ng-class=\".*?\"/g,"").replace(/_ngcontent-c1=\".*?\"/g,""));

Посмотрите на консоль, чтобы увидеть результат.

...