JavaScript를 사용하여 HTML 문자열(String)을 실제 HTML 또는 DOM으로 변환하는 방법(HTML를 String으로 변환 포함)

떠돌이개발자Jul 26, 2023

DB에 아래와 같은 html 문자열을 저장하고 있을 경우에 img 태그의 src 값을 변경해야할 경우에는 어떻게 하면 좋을까?

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="width: 50%;">
                <p><img src="http://localhost:8080/fileServer/img/2022/06/28/62747b91-1cc2-4500-a5fb-3e61e44886ec" width="260" height="160"></p>
            </td>
            <td style="width: 50%;">테스트입니다.</td>
        </tr>
    </tbody>    
</table>

문자열을 아래와 같은 방식으로 찾아서 변환해도 된다.

string str = "<div> <img src="https://i.testimg.com/images/g/test/s-l400.jpg" style="width: 100%;"> <div>Test</div> </div>";

// Get the index of where the value of src starts.
int start = str.IndexOf("<img src="") + 10;

// Get the substring that starts at start, and goes up to first ".
string src = str.Substring(start, str.IndexOf(""", start) - start);

그러나 여기서는 DOM으로 파싱하여 처리하는 방법을 알아보자.

HTML 문자열을 실제 HTML 또는 DOM으로 변환하려면 JavaScript를 사용하는 DOMParser Web API를 사용할 수 있다. DOMParser는 HTML 또는 XML 문자열을 실제 Document 또는 DOM 노드로 구문 분석하는 데 도움이 된다.

parseFromString() 메서드를 사용해서 변환해보자

첫 번째 인수로 HTML 문자열, 두 번째 인수로 문자열에 포함된 문서의 MIME 유형이다.

여기서 사용할 MIME 유형 값은 text/html이다.

다음과 같이 사용할 수 있는 다른 MIME 유형이 있다.

text/xml
application/xml
application/xhtml+xml
image/svg+xml

샘플코드는 다음과 같다.


const htmlStr = '<table style="width: 100%;"><tbody><tr><td style="width: 50%;"><p><img src="http://localhost:8080/fileServer/img/2022/06/28/62747b91-1cc2-4500-a5fb-3e61e44886ec" width="260" height="160"></p></td><td style="width: 50%;">테스트입니다.</td></tr></tbody></table>';
const parser = new DOMParser();

// dom 으로 파싱
const doc = parser.parseFromString(htmlStr, 'text/html');
console.log('doc', doc);

// 첫번째 이미지 태그의 src 값 get
const urlPath = doc.getElementsByTagName('img')[0].src;

// fileServer문자로 split
const strArr = urlPath.split('fileServer');
console.log('urlPath', strArr.toString());

// 파일의 경로만 get
const imgPath = strArr[1].toString();

// img src 값 변경
doc.getElementsByTagName('img')[0].src = 'cid:my-img

//DOM 노드값을 문자열로 가져오기
const makeHtmlStr = doc.body.outerHTML;

끝!!!

[연관자료]