jQuery Girl
  1. jQuery Girl
  3. JQuery – Remplace les balises HTML sélectionnées dans la chaîne par la valeur
Intereting Posts
Comment les gérer en cas de saut (lorsque le clavier est ouvert) dans query mobile? JSON / JQuery .getJSON () ne fonctionne pas dans IE8 / IE9 Disposition flexible à 2 colonnes link_to avec jquery params dans les rails jquery limite lignes dans un paragraphe et appliquer trois périodes à la fin JQuery, Flot, valuelabels, centre Déclencher un événement lorsque toutes les animations de la fonction en cours sont terminées jQuery Tiny Scrollbar plugin – Ne peut pas afficher tout le contenu lors de l’actualisation JQuery UI Autocomplete se déclenche automatiquement (IE) SweetAlert déroulant append dynamicment des éléments dans la liste Recalculer la position des éléments absolus? jQuery Ordre de saisie semi-automatique des résultats Highcharts, ajoutez le bouton ‘go back’ (forage précédent) lors du forage La demande $ .ajax interdomaine ne fonctionne pas En-tête collant avec jquery

JQuery – Remplace les balises HTML sélectionnées dans la chaîne par la valeur

Je travaille sur un plugin tinymce où j’ai besoin de convertir du code HTML en shortcodes.

J’ai une chaîne avec du HTML qui ressemble à ceci: 

var content = '
Content 1
Content 2
Content between rows
Content 3
Content 4
';

et veulent “convertir” les divs avec la ligne de classe en [row] Content [/ row], et les divs avec les colonnes de classe en [col] Content [/ col]. Donc, chaque ligne serait sortie comme ceci: 

 [row] [col]Content[/col] [col]Content[/col] [/row]

Donc, ma dernière chaîne après le remplacement ressemblera à ceci: 

 '[row][col]
Content 1
[/col][col]
Content 2
[/col][/row]
Content between rows
[row][col]
Content 3
[/col][col]
Content 4
[/col][/row]'

J’ai préparé un jsfiddle , mais je ne sais pas par où commencer pour remplacer les balises html par des balises shortcode.

J’espère que certains génies de jquery / javascript veulent partager leurs reflections sur la façon de résoudre ce problème 🙂

Ceci est une solution jQuery, juste parce que jQuery me permet d’économiser quelques lignes que d’écrire en utilisant du javascript pur.

fondamentalement, nous allons

  1. créez un élément div vide et mettez votre code HTML dans ce div. cela me permet d’utiliser l’api de traversée et de manipulation du DOM fourni par jquery.

  2. effectuer des recherches et mettre à jour tous les fichiers .columns et .rows.

J’ai fait un exemple courant simple sur Codepen. Tu peux jouer avec .

html:

JS: 

 $(document).ready(function(){ var content = '
Content 1
Content 2
Content between rows
Content 3
Content 4
'; var $dataWrapper = $("
"); $dataWrapper.html(content); //wrap up the data to convert in a div. //for each column in container element $dataWrapper.find('.columns').each(function(){ var htmlInsideColumn = $(this).html(); var convertedHtml = "[col]" + htmlInsideColumn + "[/col]"; $(this).after(convertedHtml); //let's place the converted html right after this column element. $(this).detach(); //remove this element. }); //for each row in container element $dataWrapper.find('.row').each(function(){ var htmlInsideColumn = $(this).html(); var convertedHtml = "[row]" + htmlInsideColumn + "[/row]"; $(this).after(convertedHtml); //let's place the converted html right after this row element. $(this).detach(); //remove this element. }); $("#output").text($dataWrapper.html()); });