<img> 및 <a> 태그를 innerHTML에 허용하지만 다른 태그는 허용하지 않으려면 어떻게해야합니까? (포럼 만들기)

Question

현재 Javascript 만 사용하여 포럼을 프로그래밍하고 있습니다 (JQuery를 사용하지 마십시오). 나는 아주 잘하고있다. 그러나 내가 도움을 청할 한 가지 문제가있다. 이것은 매우 잘 작동

 var theDiv = document.getElementById("MainBody"); 
    var content = document.createTextNode(MainPost); 
    theDiv.appendChild(content); 

그러나, 내가 사랑 :

현재 나는 텍스트 노드를 통해 사업부에 부착 한 후 변수 MainPost에 할당, 데이터베이스에서 게시물을 받고,하고 있어요 이 작업을 수행 할 수 있어야합니다 :

 document.getElementById("MainBody").innerHTML += MainPost; 

그러나 나는이 사람들이 원하는 모든 HTML 태그, 자바 스크립트 코드 다음에 "스크립트"와 같은, 심지어 뭔가를 사용하는 것을 허용 할 알고있다. 이것은 분명히 비즈니스에 좋지 않을 것입니다. 그러나 포스터가 "img"태그와 "a href"태그를 사용할 수 있도록하는 아이디어를 좋아합니다. 어떻게 든 innerHTML에 대한이 두 가지를 제외한 모든 태그를 비활성화하는 방법이 있습니까?

제공 할 수있는 모든 도움에 감사드립니다.

Answer 1

좋아,이 질문을 읽을 때 가장 먼저 생각한 것은 단어의 특정 문자열을 제외하는 정규식을 찾는 것입니다. 간단한 검색으로 a lot ofresultsfrom SO이 표시되었습니다.

점을 시작 - 문자열 (from this answer)에서 모든 HTML 태그를 제거하려면 :

:

var regex = /(<([^>]+)>)/ig 
, body = "<p>test</p>" 
, result = body.replace(regex, ""); 

console.log(result); 

당신이 (위에서 언급 한 모든 소스에서 다시) 같은 것을 할 것입니다 문자열을 제외하려면

(?!StringToBeExcluded) 

<a href 및 <img 태그가 필요합니다. 귀하의 경우에 적합 정규식 수 :

(<(?![\/]?a)(?![\/]?img)([^>]+)>) 

설명 : 연속 그것의

생각해 세 가지로 캡처 그룹 :

1. (?![\/]?a) : 부정적 예측은 불가능하다고 주장합니다 0 또는 하나의 백 슬래시가 접두사 인 문자열 "a"가 포함 된 정규 표현식과 일치해야합니다 (a href 태그를 처리해야 함)
2. (?![\/]?img) : 1과 동일하지만 여기서는 문자열 "img"를 찾습니다. 내가 왜 </img> 태그를 허용했는지 모르겠다. 예, <img>에는 닫는 태그가 없습니다. 이 문제를 해결하기 위해 [\/]? 비트를 제거 할 수 있습니다.
3. ([^>]+) : 열기 및 닫기 태그가있는 태그를 처리하기 위해 >이 0 번 또는 1 번 일치하지 않도록하십시오.

이제 모든 캡처 그룹은 <과 > 사이에 있습니다. 이미지 및 링크 태그를 제외한 모든 HTML 요소를 무시하도록이 세 캡쳐 그룹을 통합하여 만든 a regex demo을 사용해 볼 수 있습니다.

Sidenote - 나는이 정규식을 철저하게 시험하지 않았다. 부담없이 자유롭게 놀고, 필요에 따라 조정하십시오. 어쨌든, 나는 이것이 당신이 올바른 방향으로 시작하도록하기를 바랍니다.