Убрать HTML из текстового JavaScript - PullRequest
Новая
       148

Убрать HTML из текстового JavaScript

562 голосов
/ 05 мая 2009

Есть ли простой способ взять строку html в JavaScript и убрать html?

Ответы [ 34 ]

7 голосов
/ 05 мая 2009

Другое, по общему признанию, менее изящное решение, чем nickf или Shog9, было бы рекурсивно обходить DOM, начиная с тега и добавлять каждый текстовый узел. 

var bodyContent = document.getElementsByTagName('body')[0];
var result = appendTextNodes(bodyContent);

function appendTextNodes(element) {
    var text = '';

    // Loop through the childNodes of the passed in element
    for (var i = 0, len = element.childNodes.length; i < len; i++) {
        // Get a reference to the current child
        var node = element.childNodes[i];
        // Append the node's value if it's a text node
        if (node.nodeType == 3) {
            text += node.nodeValue;
        }
        // Recurse through the node's children, if there are any
        if (node.childNodes.length > 0) {
            appendTextNodes(node);
        }
    }
    // Return the final result
    return text;
}
6 голосов
/ 04 августа 2016

Если вы хотите сохранить ссылки и структуру содержимого (h1, h2 и т. Д.), Вам следует проверить TextVersionJS Вы можете использовать его с любым HTML, хотя он был создан для преобразования HTML электронное письмо в обычный текст.

Использование очень просто. Например, в файле node.js: 

var createTextVersion = require("textversionjs");
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";

var textVersion = createTextVersion(yourHtml);

Или в браузере с чистым js: 

<script src="textversion.js"></script>
<script>
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
</script>

Он также работает с require.js: 

define(["textversionjs"], function(createTextVersion) {
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
});
4 голосов
/ 29 декабря 2015 
function stripHTML(my_string){
    var charArr   = my_string.split(''),
        resultArr = [],
        htmlZone  = 0,
        quoteZone = 0;
    for( x=0; x < charArr.length; x++ ){
     switch( charArr[x] + htmlZone + quoteZone ){
       case "<00" : htmlZone  = 1;break;
       case ">10" : htmlZone  = 0;resultArr.push(' ');break;
       case '"10' : quoteZone = 1;break;
       case "'10" : quoteZone = 2;break;
       case '"11' : 
       case "'12" : quoteZone = 0;break;
       default    : if(!htmlZone){ resultArr.push(charArr[x]); }
     }
    }
    return resultArr.join('');
}

Учет> внутренних атрибутов и <img onerror="javascript"> во вновь созданных элементах dom.

использование: 

clean_string = stripHTML("string with <html> in it")

демо:

https://jsfiddle.net/gaby_de_wilde/pqayphzd/

демо топ-ответа, делающего ужасные вещи:

https://jsfiddle.net/gaby_de_wilde/6f0jymL6/1/

4 голосов
/ 12 июня 2015

После того, как все ответы были упомянуты чаще всего, если не все, имели крайние случаи и не могли полностью удовлетворить мои потребности.

Я начал изучать, как это делает php, и наткнулся на библиотеку php.js, которая копирует метод strip_tags: http://phpjs.org/functions/strip_tags/

4 голосов
/ 27 января 2017

Многие уже ответили на этот вопрос, но я подумал, что было бы полезно поделиться функцией, которую я написал, которая удаляет HTML-теги из строки, но позволяет вам включать массив тегов, которые вы не хотите удалять. Он довольно короткий и хорошо работает для меня. 

function removeTags(string, array){
  return array ? string.split("<").filter(function(val){ return f(array, val); }).map(function(val){ return f(array, val); }).join("") : string.split("<").map(function(d){ return d.split(">").pop(); }).join("");
  function f(array, value){
    return array.map(function(d){ return value.includes(d + ">"); }).indexOf(true) != -1 ? "<" + value : value.split(">")[1];
  }
}

var x = "<span><i>Hello</i> <b>world</b>!</span>";
console.log(removeTags(x)); // Hello world!
console.log(removeTags(x, ["span", "i"])); // <span><i>Hello</i> world!</span>
3 голосов
/ 10 января 2011

Я думаю, что самый простой способ - просто использовать регулярные выражения, как кто-то упоминал выше. Хотя нет смысла использовать кучу из них. Попробуйте: 

stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
3 голосов
/ 04 октября 2011

Я внес некоторые изменения в оригинальный скрипт Jibberboy2000 Надеюсь, это кому-нибудь пригодится 

str = '**ANY HTML CONTENT HERE**';

str=str.replace(/<\s*br\/*>/gi, "\n");
str=str.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<\s*\/*.+?>/ig, "\n");
str=str.replace(/ {2,}/gi, " ");
str=str.replace(/\n+\s*/gi, "\n\n");
3 голосов
/ 13 июля 2012

Вот версия, которая направлена ​​на решение проблемы безопасности MikeSamuel: 

function strip(html)
{
   try {
       var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
       doc.documentElement.innerHTML = html;
       return doc.documentElement.textContent||doc.documentElement.innerText;
   } catch(e) {
       return "";
   }
}

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

Если вам не нужна действительная разметка XML, попробуйте использовать: 

var doc = document.implementation.createHTMLDocument("");

но это не идеальное решение и по другим причинам.

2 голосов
/ 03 сентября 2012

С помощью jQuery вы можете просто получить его, используя 

$('#elementID').text()
2 голосов
/ 29 декабря 2015

Также можно использовать фантастический htmlparser2 чистый JS HTML-парсер. Вот рабочая демонстрация: 

var htmlparser = require('htmlparser2');

var body = '<p><div>This is </div>a <span>simple </span> <img src="test"></img>example.</p>';

var result = [];

var parser = new htmlparser.Parser({
    ontext: function(text){
        result.push(text);
    }
}, {decodeEntities: true});

parser.write(body);
parser.end();

result.join('');

Выход будет This is a simple example.

Смотрите это в действии здесь: https://tonicdev.com/jfahrenkrug/extract-text-from-html

Это работает как в узле, так и в браузере, если вы упаковываете свое веб-приложение с помощью такого инструмента, как веб-пакет.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...