DOM 작업을 사용하여 jQuery_jquery에서 정규식 대체

B/S 구조 클라이언트가 점점 더 "두꺼워지고" 있는 오늘날의 세계에서는 풀엔드 프로그래머로서 프런트 엔드에서 html 문자열을 조작할 가능성이 높습니다. 현재 페이지.html.

예를 들어 Baidu가 출시한 온라인 HTML 서식 있는 텍스트 편집기인 Ueditor는 온라인에서 서식 있는 텍스트 문서를 만들 수 있으며 그 기능은 Microsoft Word의 간소화된 버전과 비슷합니다. Ueditor는 Baidu의 아우라를 갖고 있지만 실제 효과는 그다지 만족스럽지 않습니다. 모든 이미지의 너비를 90%로 설정하는 등 두 번 생성하는 HTML 문자열을 처리해야 합니다.

특정 방법을 통해 텍스트 편집기에서 html 문자열을 얻을 수 있습니다. 문자열은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

꽃 같은 사오니안

신비의 피라미드

꿈같은 삶

그런데 그 다음에는 어떻게 해야 할까요? 문자열을 우아하게 처리하면 정규식을 쉽게 생각할 수 있습니다. 여기서 정규식을 사용할 수 있습니까?

대답은 '예'입니다. 먼저 레귤러 효과를 시도해 보세요. 모든 이미지의 너비를 90%로 설정하는 가장 간단한 방법은 img 태그에 style 속성을 추가한 다음 style에서 너비를 지정하는 것입니다.

일반 규칙을 사용하면 첫 번째 단계는 모든 img 태그를 일치시키는 것입니다. img 태그에는 반드시 스타일 속성이 있어야 하는 것은 아니므로 먼저 스타일 속성이 있는지 확인한 다음 직접 width: 90%; 스타일 속성? 아니요, 다른 원래 속성을 덮어쓸 수 있으므로 직접 추가하면 덮어쓰지 않습니다. 여전히 작동하지 않습니다. 원래 너비가 있으면 어떨까요? . .

아직 정규식 작성을 시작하지 않았습니다. 프로세스를 먼저 생각하면 이미 매우 지루합니다. 실제로 구현은 훨씬 더 복잡합니다.

다행히도 jQuery를 사용하면 생각을 바꾸고 이 문제를 해결할 수 있습니다.

jQuery의 장점은 HTML 문자열을 dom 요소로 직접 패키징할 수 있다는 것입니다. 이 dom 요소는 현재 페이지에 존재하지 않고 메모리에 배치됩니다.

jQuery를 사용하려면 다음 코드만 필요합니다.

코드 복사 코드는 다음과 같습니다.

//수정된 HTML 문자열을 쉽게 얻을 수 있도록 컨테이너를 정의합니다
//jQuery를 직접 사용하여 "

"를 래핑합니다. 이때 메모리에는 div 요소가 있습니다
var $container = $("

");
//수정해야 할 HTML 문자열이라고 가정합니다.
var html = "";
//수정할 html 문자열을 컨테이너에 직접 삽입
//jQuery는 html 문자열을 dom 요소로 자동으로 래핑한 다음 메모리의 div 컨테이너에 삽입할 만큼 강력합니다.
$container.append(html);
//컨테이너에 있는 모든 img 태그를 검색하고 탐색합니다
$container.find("img").each(function(i,n){
//각 img 요소에 대해 스타일 속성
에서 너비 속성을 직접 수정합니다. //스타일 속성이 없으면 자동으로 추가하고, 너비 ​​속성이 이미 있으면 직접 수정하세요.
$(n).css({
       너비: "90%"
});
});
//컨테이너의 html 콘텐츠인 수정된 html 문자열을 가져옵니다.
경고($container.html());

코드의 주석은 매우 상세하므로 자세한 설명은 생략하겠습니다. jQuery는 실제 페이지의 html뿐만 아니라 메모리의 가상 html도 작동할 수 있다는 점을 이해해야 합니다.

두 가지를 비교해보면 어떤 방법이 더 나은지 독자들이 즉시 이해할 수 있을 것이라고 믿습니다.

샤오차이가 자주 말했듯이, 문제가 해결될 수 있다고 생각했지만 오랜 시간이 지나도 여전히 해결되지 않는다면, 아마도 당신의 생각이 잘못된 것일 수 있습니다. 그러면 문제는 해결될 것입니다. 해결되다!