Replace regular expressions with dom operations

As B/S structure clients become increasingly "fat" today, as a full-end programmer, you are likely to operate html strings on the front end. Note that it is an html string, it is not the html of the current page.

For example, Baidu's online HTML Rich Text Editor, Ueditor, can create rich text documents online, and features similar to Microsoft Word in lite versions. Although the Ueditor is wearing the halo of Baidu, the actual effect is not satisfactory. We need to repeat the html string generated by the Ueditor, for example, set the width of all images to 90%.

In a method, we can obtain the html string in the text editor. Assume that the string is as follows:

1 <p> spend the same year as cool </p> 2  3 <p> the same pyramid </p> 4  5 <p> dream-like life </p> 6 

 

But what should we do next? The elegant processing of strings makes it easy for us to think of regular expressions. Can we use regular expressions here?

The answer is yes. First try the regular expression. Set the width of all images to 90%. The simplest way is to add the style attribute to the img label and specify the width in the style.

To use regular expressions, the first step is to match all the img labels. Because the img label does not necessarily have the style attribute, you must first determine whether the style attribute exists, and then add the width directly to the style attribute: 90% ;? No, this may overwrite other original attributes, so you can directly append the object without overwriting it! I still can't. What if there is width...

Before writing regular expressions, it is complicated to think about the process first. In fact, the implementation is more complicated.

Fortunately, we can use jQuery to solve this problem.

JQuery is powerful in that it can directly wrap an html string into a dom element, which does not exist on the current page and is stored in memory.

With jQuery, you only need the following code:

1 // define the container to facilitate obtaining the modified html string. 2 // directly use jQuery to package "<div> </div> ", in this case, a div element 3 var $ container =$ ("<div> </div>") is included in the memory "); 4 // assume this is the html string to be modified. 5 var html = " "; 6 // Insert the html string to be modified directly into the container. 7 // jQuery is powerful enough to automatically wrap the html string into dom elements, then insert it to the div container in the memory for 8 $ container. append (html); 9 // search all img tags in the container and traverse 10 $ container. find ("img "). each (function (I, n) {11 // For each img element, directly modify the width attribute 12 in its style attribute. // If the style attribute does not exist, it is automatically added; if the width attribute already exists, modify it directly. Do not worry too much about the 13 rows (n).css ({14 width: "90%" 15}); 16 }); 17 // obtain the modified html string, that is, the html content of the container 18 alert($iner.html ());

The comments in the Code are very detailed, so there is no explanation for the dishes. We need to understand that jQuery can operate not only the html on the real page, but also the virtual html in the memory.

By comparing the two, I believe that readers can immediately understand which method is better.

As I often say in the following sentence: if you think that a problem can be solved, but it has not been solved for a long time, it is likely that your thinking is wrong. Think about it from another angle and solve the problem!