RegExp에서 템플릿 문자열 일치하기

Question

짧은 설명을 위해 클라이언트 측 템플릿을 사용하는 작은 데모를 작성하려고합니다. 내 regexp가 동적으로 만들어지고 문자열 내에서 자체의 인스턴스를 대체하려고하지만 이상한 이유로 작동하지 않아 콘솔에 중요한 부분을 기록했습니다. 누구든지 조언 할 수 있습니까?

내 HTML : 아래

<script type="text/template" id="link"> 
    <a href="{href}"> 
    {title} 
    </a> 
</script> 

그리고 jsFiddle 내 자바 스크립트 :

var linkTemplate = document.querySelector('#link').innerHTML.replace(/^\s+|\s+$/g, ''); 

var data = [{ 
"title": "Google", 
"href": "//google.com" 
},{ 
"title": "Yahoo", 
"href": "//yahoo.com" 
}]; 

for (var i = 0; i < data.length; i++) { 
var obj = data[i]; 
for (key in obj) { 
    if (obj.hasOwnProperty(key)) { 
     var regexp = new RegExp('\{' + key + '\}', 'i'); 
     console.log(regexp); 
     linkTemplate.replace(regexp, 'l'); 
     console.log(obj[key]); 
    } 
} 
document.body.innerHTML += linkTemplate; 
} 

http://jsfiddle.net/K9z6C/

Answer 1

나는 당신의 쿼리가 제대로, 당신은 아래 변경해야 이해하는 경우 :

linkTemplate = linkTemplate.replace(regexp, 'l'); 

이유 - .replace()은 대체 문자열로 대체 된 패턴의 일부 또는 전체 일치와 함께 새 문자열을 반환합니다.

편집 : MC ND의 답변에 게시 한 샘플 피들을 기반으로 업데이트되었습니다. 업데이트 된 코드는 다음과 같습니다 : 당신이 linkTemplate 콘텐츠를 교체하면

var str = 'hello {name}, you are {age} years old', 
    tpl = function(str, data) { 
     return str.replace(/\{(.*?)\}/g, function(_, a) { return data[a]; }); 
    }; 

tpl(str, {name: 'John', age: 47}); // Hello John, you are 47 years old 

Answer 2

또한 데이터를 가져 오기 위해 시도 후 로그인을 반대하고 모든 {...} 일치 할 수 있습니다 첫 번째 데이터의 경우 두 번째 데이터 집합을 대체 할 자리 표시자가 더 이상 없습니다. 결과에 추가하려면 임시 스팅으로 저장하십시오.

Answer 3

:

for (var i = 0; i < data.length; i++) { 
    var obj = data[i]; 
    link = linkTemplate; //set the temporary variable with the template script for every data item 
    for (key in obj) { 
     if (obj.hasOwnProperty(key)) { 
      var regexp = new RegExp('\{' + key + '\}', 'g'); 
      link = link.replace(regexp, obj[key]); //replace the href and title based on data 
     } 
    } 
    document.body.innerHTML += link + '<br/>'; //add the value from the temporary variable to document body. 
} 

Demo Fiddle