Question

我想用javascript动态替换一些占位符文本。试图使用jquery过滤器并包含选择器，但没有真正得到任何地方。你知道如何更换它们吗？

<div class="container">
<h1>$$Insert text here$$</h1>
<div>
    <p>My first paragraph.</p>
    <div>$$Insert text here$$</div>
    <div>
        <input type="text" name="lname" placeholder="$$Insert text here$$"><br>
        <p>Here some other text</p>
    </div>
</div>

Answer 1

一个简单的例子，假设您只有一种用于学习目的的占位符：

var container = $('.container');
container.html(container.html().replace(/\$\$Insert text here\$\$/g,'mytext'))

演示：http://jsfiddle.net/Pqpfa/2/

如果您正在尝试实现自己的模板引擎，这里有一个更复杂的示例，您可以使用不同的占位符名称：

HTML：

<div class="container">
<h1>$$pageTitle$$</h1>
<div>
    <p>My first paragraph.</p>
    <div>$$inputName$$</div>
    <div>
        <input type="text" name="lname" placeholder="please enter $$inputName$$"><br>
        <p>Here some other text</p>
    </div>
</div>

JS：

var myClass = {};
myClass.pageTitle = 'my awsome page title';
myClass.inputName = 'your name';

var replaceFunc = function(match,p1){
    if (myClass[p1]){
        return myClass[p1]
    }
}

var container = $('.container');
container.html(container.html().replace(/\$\$(.*)\$\$/g, replaceFunc))

演示：http://jsfiddle.net/kQH5F/1/

Answer 2

最好使用模板引擎，但即使使用纯JS

也可以实现这一点

document.body.innerHTML = document.body.innerHTML.replace(new RegExp('\\$\\$Insert text here\\$\\$','g'), 'replace it with');

演示http://jsfiddle.net/tp9NY/

Answer 3

这是一个小实用的例子，您基本上可以传递任何模型：

 <div class="container">
 <h1>Hi $$fname$$ $$lname$$</h1>
 <div>
 <p>My first paragraph.</p>
 <div>You are the <b>$$title$$</b> of <b> $$company$$ </b></div>
 <div>
  <input type="text" name="lname" placeholder="$$salary$$"><br/>
    <p>Call us at $$phone$$</p>
</div>
</div>


 var myobj = {
  fname: 'Alex',
  lname: 'Shilman',
  title: 'CEO',
  company: 'Interactive Aim',
  phone: '(111)111-1111',
  salary: 10000000
  },
 makeView = function(myobj){
  for (var key in myobj){
   $('div.container').html($('div.container').html().replace('$$'+key+'$$',    myobj[key]));
  }
 };  

  makeView(myobj);

JSBin工作示例：http://jsbin.com/Oforipom/2/edit

使用javascript逐个替换字符串

3 个答案: