JavaScript에서 문자열을 HTML로 변환
-
innerHTML속성을 사용하여 문자열을 HTML 개체로 변환 -
DOMParser()인터페이스를 사용하여 문자열을 HTML 개체로 변환 -
jQuery를 사용하여 HTML로 전달된 문자열 유형 확인
JavaScript에서 일부 특정 규칙은 전체 개발 기록을 통합하기 위해 한 단계 앞서 만듭니다. 마찬가지로, 문자열을 지정하는 비정적 방법 중 하나(HTML 요소 기증 패턴의 형태) 및 나중에 이를 고유한 개체 조각으로 HTML 본문에 전달합니다.
이것은 인터페이스를 동적으로 만들고 그렇지 않으면 호출하기 힘든 많은 문제를 해결할 수 있습니다.
다음 콘텐츠의 코드 예제는 이 변환을 구현하는 방법을 보여줍니다. 먼저 innerHTML 속성이 있는 문자열을 전달합니다.
다음 예에서는 DOM 구문 분석 방법을 사용합니다. 이 규칙은 많은 브라우저에서 허용되는 문제가 있으므로 대부분 권장되지 않습니다.
마지막 섹션에서 우리가 전달한 문자열이 HTML 객체인지 아니면 그냥 문자열인지 조사할 것입니다. 뛰어들자!
innerHTML 속성을 사용하여 문자열을 HTML 개체로 변환
여기에 원시 문자열을 매개변수로 사용하는 stringToHTML 함수가 있습니다. 그런 다음 div를 만들고 그 안에 주어진 문자열을 전달하려고 합니다.
대신 HTML 본문에 전달할 수도 있지만 깔끔하게 하려면 div 요소가 필요합니다.
다음으로 새로 생성된 div는 인스턴스 dom(가정)과 연결됩니다. 따라서 dom의 경우 innerHTML 속성을 설정한 다음 문자열을 전달합니다.
return은 우리가 만든 stringToHTML 함수에 대한 dom 인스턴스가 됩니다. 코드 라인을 확인해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="abc.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var dom = document.createElement('div');
dom.innerHTML = str;
return dom;
};
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
출력:
DOMParser() 인터페이스를 사용하여 문자열을 HTML 개체로 변환
DOMParser()는 종종 무시되거나 조건과 함께 사용될 수 있습니다. 문제를 처리하는 이전 방법이 지워지면 이 코드 세그먼트가 실행되어 프로세스를 백업할 수 있습니다.
여기에서 DOMParser() 인터페이스의 인스턴스를 사용하고 인스턴스는 parseFromString()에 의해 트리거됩니다. 매개변수는 문자열과 HTML에서 표현해야 하는 유형입니다.
그런 다음 doc 인스턴스를 HTML 본문에 전달합니다.
코드 조각:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="2.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
console.log(
stringToHTML('<h1>Hello world!</h1><p>I am fine Thank you! ^_^</p>'));
출력:
-Interface-to-Convert-String-to-HTML-Object.webp)
jQuery를 사용하여 HTML로 전달된 문자열 유형 확인
이 섹션에서는 전체 작업을 결정합니다. HTML 객체가 생성되었는지, 유형 등을 확인합니다.
jQuery를 사용하여 문자열을 전달할 수 있으면 개체 형식의 HTML로 이동합니다. 콘텐츠를 미리 보지는 않았지만 HTML 본문에 공간을 만들었습니다(영구적이지 않음).
그럼 코드 블록으로 넘어가 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="3.js"></script>
<script>
var stringToHTML = function (str) {
var d = $(str);
return d;
}
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
</script>
</body>
</html>
출력:
