Quelle est la façon la plus pratique pour convertir HTML en texte brut, tout en préservant les sauts de ligne (avec JavaScript)?

Fondamentalement, j'ai juste besoin de l'effet de copie HTML à partir de la fenêtre du navigateur et de le coller dans un textarea élément.

Par exemple: je veux ceci:

<p>Some</p>
<div>text<br />Some</div>
<div>text</div>

pour devenir ce:

Some
text
Some
text

Le problème que vous allez avoir, c'est de l'ordre le texte s'affiche. Comment quelque chose de fixe n'est pas toujours liée à la majoration de la hiérarchie.
double possible de la Bande de HTML à partir du Texte JavaScript

OriginalL'auteur Danylo Mysak | 2010-09-28

16

Si le HTML est visible au sein de votre page web, vous pourriez le faire avec la sélection de l'utilisateur (ou juste un TextRange dans IE). Ce ne conserver les sauts de ligne, si pas nécessairement attaque et de fuite des blancs de l'espace.

Mise à JOUR le 10 décembre 2012

Cependant, la toString() méthode de Selection objets est pas encore normalisée et travaille de façon incohérente entre les navigateurs, c'est pourquoi cette approche est fondée sur des bases fragiles, et je ne recommande pas de l'utiliser maintenant. Je voudrais supprimer cette réponse si ce n'était pas acceptée.

Démo: http://jsfiddle.net/wv49v/

Code:
```
function getInnerText(el) {
    var sel, range, innerText = "";
    if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        innerText = range.text;
    } else if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        sel = window.getSelection();
        sel.selectAllChildren(el);
        innerText = "" + sel;
        sel.removeAllRanges();
    }
    return innerText;
}
```
Jusqu'voter pour une solution intelligente. Pourquoi faire tout le levage lourd?
Merci. Il est intéressant de noter, dans le non-IE cas (premier bloc), il obtient ce serait copié dans le presse-papiers, mais dans IE cas (deuxième bloc) il n'est pas sur la même chaîne.
Quelle est la différence entre le IE et non-IE cordes? Le premier bloc utilise de la Sélection toString() méthode pour extraire le texte de la sélection (plutôt que les riches texte est copié dans le presse-papiers), de sorte qu'ils devraient être plus ou moins identiques.
C'est certainement construit sur des bases fragiles: la Sélection.toString() n'est pas normalisée, fonctionne différemment entre les navigateurs et ne permet pas de conserver les sauts de ligne dans IE 9 (publiées depuis la version originale de cette réponse a été écrit). Toutefois, cela ne fonctionne toujours conserver les sauts de ligne dans les versions actuelles de Mozilla, WebKit et Opera, et depuis j'ai modifié juste maintenant, c'est à dire. Je ne recommanderais pas cette approche pour le long terme, pour être honnête.
Oui. Cette réponse n'a jamais été une très bonne idée.

OriginalL'auteur Tim Down
4

J'ai essayé de trouver un peu de code que j'ai écrit pour cela un moment que j'ai utilisé. Il a travaillé très bien. Permettez-moi de souligner ce qu'il a fait, et j'espère que vous ne pourrait reproduire son comportement.
- Remplacer les images avec alt ou le titre du texte.
- Remplacer des liens avec le texte "[lien]"
- Remplacer les choses qui produisent généralement verticale de l'espace blanc. h1-h6, div, p, br, rh, etc. (Je sais, je sais. Ceux-ci pourraient en fait être des éléments inline, mais ça marche bien).
- Foirer le reste des balises et de la remplacer par une chaîne vide.
Vous pouvez même étendre ce plus pour le format des choses comme des listes numérotées ou non. En réalité, tout dépend de jusqu'où vous voulez aller.

MODIFIER

Trouvé le code!
```
public static string Convert(string template)
{
 template = Regex.Replace(template, "<img .*?alt=[\"']?([^\"']*)[\"']?.*?/?>", "$1"); /* Use image alt text. */
 template = Regex.Replace(template, "<a .*?href=[\"']?([^\"']*)[\"']?.*?>(.*)</a>", "$2 [$1]"); /* Convert links to something useful */
 template = Regex.Replace(template, "<(/p|/div|/h\\d|br)\\w?/?>", "\n"); /* Let's try to keep vertical whitespace intact. */
 template = Regex.Replace(template, "<[A-Za-z/][^<>]*>", ""); /* Remove the rest of the tags. */

 return template;
}
```
Hum... ce n'est pas le Javascript n'est-ce pas? Ne pas répondre directement à la question, étant donné que la question vise vraiment, copier et coller
La langue n'est pas vraiment important, c'est comment sa va ce sujet. Cela pourrait facilement être porté à JS. Je suis juste montrer quelque chose que j'avais fait dans le passé.
Je vous remercie. C'est tout à fait comme elle. Bien que, malheureusement, le résultat n'est pas exactement ce que l'utilisateur voit. Par exemple, Convert('Certainstexte") et de les Convertir('Certains texte') donnent des résultats différents, tandis que le navigateur rend ceux de la même façon.

OriginalL'auteur Kevin Wiskia

J'ai fait une fonction sur la base de cette réponse: https://stackoverflow.com/a/42254787/3626940

function htmlToText(html){
    //remove code brakes and tabs
    html = html.replace(/\n/g, "");
    html = html.replace(/\t/g, "");

    //keep html brakes and tabs
    html = html.replace(/<\/td>/g, "\t");
    html = html.replace(/<\/table>/g, "\n");
    html = html.replace(/<\/tr>/g, "\n");
    html = html.replace(/<\/p>/g, "\n");
    html = html.replace(/<\/div>/g, "\n");
    html = html.replace(/<\/h>/g, "\n");
    html = html.replace(/<br>/g, "\n"); html = html.replace(/<br( )*\/>/g, "\n");

    //parse html into text
    var dom = (new DOMParser()).parseFromString('<!doctype html><body>' + html, 'text/html');
    return dom.body.textContent;
}

OriginalL'auteur chrmcpn

Basé sur chrmcpn réponse, j'ai dû convertir en HTML de base, modèle de courrier électronique dans une version en texte brut dans le cadre d'un script de génération en node.js. J'ai eu à utiliser JSDOM pour le faire fonctionner, mais voici mon code:

const htmlToText = (html) => {
    html = html.replace(/\n/g, "");
    html = html.replace(/\t/g, "");

    html = html.replace(/<\/p>/g, "\n\n");
    html = html.replace(/<\/h1>/g, "\n\n");
    html = html.replace(/<br>/g, "\n");
    html = html.replace(/<br( )*\/>/g, "\n");

    const dom = new JSDOM(html);
    let text = dom.window.document.body.textContent;

    text = text.replace(/ /g, "");
    text = text.replace(/\n /g, "\n");
    text = text.trim();
    return text;
}

OriginalL'auteur holm50

-1

Trois étapes.
```
First get the html as a string.
Second, replace all and with \r\n.
Third, use the regular expression "<(.|\n)*?>" to replace all markup with "".
```
Malheureusement, cette approche ignore les sauts de ligne qui apparaissent entre deux paragraphes ou des divs.
N'est-ce pas aussi facilement résolu par l'insertion d'une dur de pause après chaque proches de P et balise DIV avant de faire la regex remplacer?
Eh bien, le problème est un peu plus profond. J'ai besoin d'obtenir un texte qui ressemble à ce que l'utilisateur voit sur un écran. Par exemple, si il y a deux paragraphes ('p') et ils ont tous deux marge standard je veux obtenir deux sauts de ligne entre les correspondants des fragments de texte. Mais quand la marge est de 0, il doit être d'un seul saut de ligne. C'est comment le presse-papiers œuvres — au moins dans certains navigateurs.

OriginalL'auteur Serapth

Vous devez vous connecter pour publier un commentaire.