Блог

Главная - Вопросы по программированию - Как удалить HTML-элемент без тегов с помощью NodeJS?

Как удалить HTML-элемент без тегов с помощью NodeJS?

#javascript #html #node.js

#javascript #HTML #node.js

Вопрос:

У меня есть HTML-строка, подобная этой:

 <div>
   <p>a</p>
   <p>b</p>
   <p>c</p>
   <img src='a.jpg'>
   <img src='b.jpg'>
   d
   e
   f
</div>

Я использовал sanitize-html, чтобы разрешить только тег p и img, однако он по-прежнему возвращает весь текст.

Последний результат, который я хочу, это удалить d, e и f, как показано ниже:

 <div>
   <p>a</p>
   <p>b</p>
   <p>c</p>
   <img src='a.jpg'>
   <img src='b.jpg'>
</div>

Вот мой код, использующий sanitizeHtml:

 var htmlString = sanitizeHtml(news.htmlcontent, {
    allowedTags: [ 'p', 'img' ],
    exclusiveFilter: function(frame) {
        return (frame.tag === 'img' amp;amp; frame.attribs.src.indexOf('rfa_resources/graphics') !== -1);
    }
});

Ответ №1:

В вашем конкретном случае, когда код находится между <div> тегами, поэтому в следующем примере удаляется ненужный текст.

 var sanitizeHtml = require('sanitize-html');

var HTMLstring = "<div><p>a</p><p>b</p><p>c</p><img src='a.jpg'><img src='b.jpg'>def</div>";

var sanitizedString = sanitizeHtml(HTMLstring, {
    allowedTags: [ 'p', 'img', 'div' ],
    exclusiveFilter: function(frame) {
        return (frame.tag === 'img' amp;amp; frame.attribs.src.indexOf('rfa_resources/graphics') !== -1);
    },
    transformTags: {
        'div': function(tagName) {
            return {
                tagName: 'div',
                text: ''
            };
        }
    },
});

console.log(sanitizedString); // <div><p>a</p><p>b</p><p>c</p><img src="a.jpg" /><img src="b.jpg" /></div>

Комментарии:

1. Это зависит от тегов, текст которых вы хотите удалить. Какие теги вы хотите, чтобы их текст был удален?

Ответ №2:

Для тех, кто стремится достичь того же с помощью jquery, ниже приведен код, который помогает это сделать:

 function getText(str){
    $('body').append('<section id="test"></section>');
    $('#test').append(str);
    var text = $("#test div").contents().filter(function() {
      return this.nodeType == 3;
    }).text();
    $('#test').remove();
    return text;
}
var myString = "<div><p>a</p><p>b</p><p>c</p><img src='a.jpg'><img src='b.jpg'>def</div>";
var text = getText(myString);
var result = myString.replace(text, '');
console.log(result); // <div><p>a</p><p>b</p><p>c</p><img src='a.jpg'><img src='b.jpg'></div>

Но, пожалуйста, обратите внимание, что все текстовые узлы должны отображаться вместе, иначе коду потребуется небольшая модификация, чтобы удалить их все.

Надеюсь, это поможет…