2016-11-03 3 views
3

긴 이야기지만 일부 가짜 HTML을 가져 와서 JavaScript를 사용하여 실제 HTML로 바꾸어야합니다. 예를 들면 : 나는 가능한 모든 요소에 배치 할 수있는 모든 속성을 예상 할 수 없기 때문에이 작업을 수행하는 정규식을 사용하고URL을 제외한 특정 패턴의 RegEx

<span class="text-bold" data="attribute">TITLE</span> 

:

{span class:text-bold data:attribute}TITLE{/span} 

가로 변경해야합니다. 모든 데이터 인스턴스를 찾기 위해 어느 정도 작동하는 표현식 : 속성 :

/(\w+\:)(.[^\s\}]*)/g 

그러나 문제가 있습니다. 이 표현은, 예를 들어, URL을 일치 :

일치에서 모든 URL을 제외하려는 시도에서
http://www.google.ca 

, 나는 표현과 같이 변경 :

/(?!http)(\w+\:)(.[^\s\}]*)/g 

그러나,이 예상되는 영향을 미치지 않았다, 패턴은 선도적 인 'h'없이 URL을 계속 일치시킵니다. 예를 들어,

ttp://www.google.ca 

나는 꽤 오랫동안 RegEx를 사용하지 않았다는 것을 인정할 것이다. 그래서 나는 아마 오해하고있을 것이다. RegEx 패턴이 특정 문자 집합으로 시작하는 일치 항목과 일치하지 않는다고 어떻게 말할 수 있습니까?

+0

전체 코드를 추가하십시오 (바꾸기 포함). – Dekel

+0

정규 표현식이 데이터 주변의'{} '와 일치하지 않는 이유는 무엇입니까? 당신의 문제를 해결하지 않겠습니까? – Aaron

+0

'\ w +'=>'\ b \ w +'앞에 단어 경계를 추가하십시오. 또한':'과'}'를 벗어날 필요가 없습니다. –

답변

1

가능하면 // 앞에 콜론 뒤에 네가티브 룩 어 헤드가 있어야합니다.

"foo://bar".match(/(\w+:)(?!\/\/)([^\s\}]*)/); //no dice 
"foo:bar".match(/(\w+:)(?!\/\/)([^\s\}]*)/); //dice 

는 물론, 이것은 또한 합법적으로 //로 시작하는 모든 속성의 값을 차단합니다,하지만 난 그만한 가치 위험의 가정합니다.

+1

아름답게 작동합니다, 감사합니다! 나는 // 대신 http를 맞추려고 시도한 바보 같았다. – CGriffin

+0

/(\ w +) (? ::) (?! \/\ /) ([^ \ s}] *)/이렇게하면 속성과 데이터를 구분하는 콜론이 캡처되지 않습니다. – CGriffin

0

나는의 핸들러 함수에 중첩 된 정규식 작동 할 정규식 - 대체 :

document.getElementById('outp').value = document.getElementById('inp').value.replace(
 
    /{([^}]+)}/g, function(m, tag) { 
 
     return '<' + tag.replace(/(\w+):(\S+)/g, '$1="$2"') + '>'; 
 
    });
textarea { 
 
    width:100%; 
 
}
<textarea id="inp" rows="5">{span class:text-bold data:attribute}TITLE{/span} 
 

 
http://www.google.ca</textarea> 
 
<textarea id="outp" rows="5"></textarea>

첫 번째 정규식 {} 내부 기능 사이의 모든 인스턴스 {([^}]+)} 잡고 해당 경기에서만 작동하므로 다른 콜론은 그대로 유지됩니다.

관련 문제