Utiliser des opérations DOM pour remplacer les expressions régulières dans jQuery_jquery

Dans le monde d'aujourd'hui où les clients de structure B/S deviennent de plus en plus « gros », en tant que programmeur complet, vous êtes susceptible d'utiliser des chaînes HTML sur le front-end. Notez que vous utilisez des chaînes HTML, pas le. page actuelle.

Par exemple, Ueditor, un éditeur de texte enrichi HTML en ligne lancé par Baidu, peut créer des documents en texte enrichi en ligne et ses fonctions sont comparables à une version simplifiée de Microsoft Word. Bien qu'Ueditor ait l'aura de Baidu, l'effet réel n'est pas très satisfaisant. Nous devons traiter la chaîne html qu'il génère deux fois, par exemple en définissant la largeur de toutes les images à 90 %.

Grâce à une certaine méthode, nous pouvons obtenir la chaîne html dans l'éditeur de texte. Supposons que la chaîne soit la suivante :

Copier le code Le code est le suivant :

<p>Sao Nian en forme de fleur</p>
<img src="./saonian.png" alt="Sao Nian Selfie" >
<p>Pyramide mystérieuse</p>
<img style="hauteur:30px;" src="./jinzita.png" alt="Pyramide chinoise" >
<p>Une vie de rêve</p>
<img style="largeur:50px;hauteur:30px;" src="./rensheng.png" alt="Toutes sortes de vie" >

Mais que faire ensuite ? Le traitement élégant des chaînes nous permet de penser facilement aux expressions régulières. Pouvons-nous utiliser des expressions régulières ici ?

La réponse est oui, essayez d’abord l’effet régulier. Définissez la largeur de toutes les images à 90 %. Le moyen le plus simple consiste à ajouter l'attribut de style à la balise img, puis à spécifier la largeur dans le style.

En utilisant les règles habituelles, la première étape consiste à faire correspondre toutes les balises img. Puisque la balise img n'a pas nécessairement d'attribut de style, vous devez d'abord déterminer s'il existe un attribut de style, puis ajouter directement width: 90%; l'attribut de style ? Non, cela peut écraser d'autres attributs d'origine, alors ajoutez-les simplement directement. L'ajout ne les écrasera pas ! Cela ne fonctionne toujours pas, que se passe-t-il s'il y a une largeur à l'origine. . .

Je n'ai pas encore commencé à écrire des expressions régulières. En pensant d'abord au processus, c'est déjà très fastidieux. En fait, la mise en œuvre est encore plus compliquée.

Heureusement, nous pouvons changer notre façon de penser et résoudre ce problème avec l'aide de jQuery.

La puissance de jQuery est qu'il peut directement packager une chaîne HTML dans un élément dom. Cet élément dom n'existe pas dans la page actuelle, il est placé en mémoire.

Grâce à jQuery, vous n'avez besoin que de ce morceau de code :

Copier le code Le code est le suivant :

//Définir le conteneur pour faciliter l'obtention de la chaîne html modifiée
//Utilisez jQuery directement pour envelopper "<div></div>". A ce moment, il y aura un élément div dans la mémoire
. var $conteneur = $("<div></div>");
//Supposons qu'il s'agisse de la chaîne HTML qui doit être modifiée
var html = "<img style='largeur : 50%;' src='./test.jpg' >";
//Insérez directement la chaîne html à modifier dans le conteneur
//jQuery est suffisamment puissant pour envelopper automatiquement les chaînes HTML dans des éléments dom, puis les insérer dans le conteneur div en mémoire
$container.append(html);
//Recherchez toutes les balises img dans le conteneur et parcourez
$container.find("img").each(function(i,n){
//Pour chaque élément img, modifiez directement l'attribut width dans son attribut style
//Si l'attribut style n'existe pas, ajoutez-le automatiquement ; s'il existe déjà un attribut width, modifiez-le directement pas trop de soucis
$(n).css({
       largeur : "90 %"
});
});
//Récupère la chaîne html modifiée, qui est le contenu html du conteneur
alerte($container.html());

Les commentaires dans le code sont très détaillés, donc je n'expliquerai pas trop. Nous devons comprendre que jQuery peut non seulement exploiter le html dans la page réelle, mais aussi le html virtuel dans la mémoire.

En comparant les deux, je pense que les lecteurs peuvent immédiatement comprendre quelle méthode est la meilleure.

Comme le dit souvent Xiao Cai : Si vous pensez qu'un problème peut être résolu, mais qu'il n'est toujours pas résolu après un long moment, c'est probablement que votre réflexion est fausse. Pensez-y sous un autre angle, et le problème le sera. être résolu !