12
votes

Quel est le moyen le plus pratique de convertir HTML en texte brut tout en préservant les pauses de ligne (avec JavaScript)?

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

Par exemple, je le souhaite: P>

Some
text
Some
text


2 commentaires

Le problème que vous allez avoir est la commande que le texte apparaît. Comment quelque chose sort n'est pas toujours lié à la hiérarchie du balisage.


Dupliqué possible de Strip HTML du texte JavaScript


5 Réponses :


-2
votes

trois étapes. xxx


3 commentaires

Malheureusement, cette approche ignore les pauses de la ligne qui émergent entre deux paragraphes ou divs.


Est-ce pas aussi facilement résolu en insérant une rupture dure après chaque étiquette de fermeture P et div avant de remplacer la regex?


Eh bien, le problème est un peu plus profond. J'ai besoin d'obtenir du texte qui ressemble à ce que l'utilisateur voit sur un écran. Par exemple, s'il existe deux paragraphes (éléments «P») et ils ont tous deux la marge standard, je souhaite obtenir deux pauses de ligne entre les fragments de texte correspondants. Mais quand la marge est 0, il doit être une pause à la ligne unique. Voilà comment fonctionne du presse-papier - au moins dans certains navigateurs.



7
votes

J'ai essayé de trouver du code que j'ai écrit pour cela un moment de retour que j'ai utilisé. Cela fonctionnait bien. Laissez-moi décrire ce qu'il a fait, et j'espère que vous pourriez dupliquer son comportement.

  • Remplacez les images par texte alt ou titre. li>
  • remplacer les liens avec "texte [lien]" li>
  • Remplacez les choses qui produisent généralement un espace blanc vertical. H1-H6, DIV, P, BR, HR, etc. (Je sais, je sais. Celles-ci pourraient en réalité être des éléments en ligne, mais cela fonctionne bien.) li>
  • Dessez le reste des étiquettes et remplacez-la par une chaîne vide. li> ul>

    Vous pouvez même développer cela plus pour formater des choses comme des listes commandées et non ordonnées. Cela dépend vraiment de la distance que vous voudrez aller. P>

    EDIT STRY> P>

    trouvé le code! P>

    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;
    }
    


3 commentaires

Erm ... ce n'est pas JavaScript, n'est-ce pas? Ne répond également pas directement à la question, étant donné que la question concerne vraiment la copie et la pâte


La langue n'a pas d'importance, c'est comme ça que ça va à ce sujet. Cela pourrait facilement être porté à JS. Je montrais juste quelque chose que j'avais fait dans le passé.


Merci. C'est tout comme ça. Bien que, malheureusement, le résultat n'est pas exactement ce que l'utilisateur voit. Par exemple, convertir ('

Certains

texte ') et convertir ('

Certains

texte ') Donnez des résultats différents pendant que le navigateur rend ceux de la même manière.



17
votes

Si ce HTML est visible dans votre page Web, vous pouvez le faire avec la sélection de l'utilisateur (ou juste un textrange code> dans IE). Cela préserve des pauses de la ligne, sinon nécessairement de mener et de traîner de l'espace blanc.

Mise à jour 10 décembre 2012 strong> p>

Cependant, la méthode Tostring () Code> de la sélection code> code> est Pas encore normalisé et fonctionne de manière incohérente entre navigateurs, cette approche est donc basée sur un terrain de fragile et je ne recommande pas de l'utiliser maintenant forte>. Je supprimerais cette réponse si elle n'étirait pas acceptée. P>

Demo: http: // jsfiddle. NET / WV49V / P>

CODE: P>

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;
}


13 commentaires

Merci. Fait intéressant, dans un cas non-IS (premier bloc), il obtiendrait ce qui serait copié dans le presse-papiers, mais dans l'affaire IE (deuxième bloc), ce n'est pas la même chaîne.


Quelle est la différence entre les cordes IE et non-IS? Le premier bloc utilise la méthode de la sélection TOSTRING () d'extraire uniquement le texte de la sélection (plutôt que le texte riche qui est copié dans le presse-papiers), afin qu'ils soient donc plus ou moins identiques.


Désolé, je voulais dire que la chaîne que vous obtenez en copiant un fragment de page dans le presse-papiers diffère de celui que votre fonction revient. Et c'est le cas avec IE, pour les navigateurs non-Is, ces deux cordes sont identiques. La fonction elle-même est parfaite pour le problème que j'ai décrit dans ma question (à l'exception des choses à savoir, ce qui n'est pas si important).


Malheureusement, il s'est avéré que mon vrai problème est assez différent et ne peut probablement pas être résolu de cette façon. J'ai besoin de deux paragraphes de texte, à la fois avec la marge: 0, à reconnaître deux lignes consécutives sans une ligne vide entre eux. Il semble que Webkit-navigateurs soient les seuls navigateurs qui prennent en compte le paramètre «marge».


Ah. Je n'ai pas de réponse facile pour cela.


Cela ne peut pas garder les pauses de ligne


@ HIENBT88: Il est certainement construit sur des fondations de Shaky: Sélection.Tostring () n'est pas normalisée, fonctionne différemment entre navigateurs et ne préservit pas les pauses de ligne dans IE 9 (publié depuis la version originale de cette réponse). Cependant, il préserve toujours des ruptures de ligne dans les versions actuelles de Mozilla, de Webkit et d'Opera, et depuis que je l'ai modifiée juste maintenant, à savoir. Je ne recommanderais pas cette approche à long terme pour être honnête.


Cette solution fonctionne vraiment bien comparée à: Stackoverflow.com/Questtions/4502673/... Je suis de meilleurs résultats pour moi, puis avec d'autres méthodes et dans Safari et Chrome semble fonctionner correctement. Depuis que le poste est d'environ 1 an, toutes les mises à jour sur la stabilité de cette solution?


@NearPoint: Rien de beaucoup n'a changé depuis mon dernier commentaire, autant que je sache. Si vous utilisez cette approche, vous êtes à la merci des développeurs de navigateurs.


Merci jusqu'à présent, il semble travailler sur des versions assez récentes de Firefox, Safari et Chrome sur Mac. Je suppose que ce serait la même chose pour les versions Windows. Et on dirait que vous avez eu votre travail. Êtes-vous au courant de tout problème dans certains navigateurs? Pour autant que je sache, cela fonctionne bien et que je veux l'utiliser, mais je veux être conscient de ce que les problèmes sont là-bas pour surveiller.


@NearPoint: Je ne suis pas au courant de problèmes spécifiques, mais le genre de chose à faire de la surveillance serait de la manière dont différents navigateurs manipulent des objets comme les cellules de table (éventuellement celles-ci seront séparées par des onglets dans les représentations de chaîne), contenu de < style> et