试着动态更换字符串,最好的方法是什么?

时间:2015-01-01 09:43:18

标签: javascript html css regex

我试图用一个跨度来替换一些文本。

示例:

当一个人输入单词"后退"和它之后的空间,它使整个句子或行中的那个词变成粗体。

现在我有一个CSS类设置,我一直试图把它放到一个范围内,但我不确定它是否有效......它也可以在任何时候发生新的重置,所以光标跳回到开头,它不会让我前进。

这是我到目前为止(我的正则表达式现在也是错误的):



function replace(e) {
  if (e.keyCode == 13) {
    element = document.getElementById("script");
    rg = /^INT/;
    element.innerHTML = element.innerHTML.replace(
      rg,
      '<span id="bold">$1</span>'
    );
  };
};
&#13;
<div contenteditable="true" id="script" style="width: 100%; height: 500px; border: 1px solid black;" onkeydown="replace(event)">
  Replace
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

如@Mouser所述,您的注册表将在开头查找 INT 字符串。

这是正确的代码。您只需根据需要修复您的RegEx。我已经测试了它和它的工作。

function replace(e) {
  if (e.keyCode == 13) {
    element = document.getElementById("script");
    var _str = element.innerHTML.trim("")
    rg = /INT/;
    element.innerHTML = _str.replace(
      rg,
      function($1) {
        console.log($1)
          return '<h1><span id="bold">' + $1 + '</span></h1>'
      } 
    );

    //Set cursor position
    var range = document.createRange()
    var _lastDom = element.childNodes[element.childNodes.length - 1];
    var end = '';
    if(_lastDom && _lastDom.innerHTML == undefined) {
        end = _lastDom.length
    } else {
        _lastDom
        end = 1
    }
    range.setStart(_lastDom,end)
    range.setEnd(_lastDom,end)
    sel = document.getSelection()
    sel.removeAllRanges()
    sel.addRange(range)
  };
};

答案 1 :(得分:0)

可能是更好的方法,但这样的事情可能会有所帮助

&#13;
&#13;
var thepara=document.getElementById('thepara').innerHTML;

document.getElementById('thetext').addEventListener('keyup',function(e){
 var thetext=this.value;
 var thelength=this.value.length;
 
  var thestart=thepara.indexOf(thetext);
  var found=thepara.substr(thestart,thelength);
  if(found != "n" ){
    var newstring="<span class='bolded'>"+found+"</span>";
      document.getElementById('thepara').innerHTML=thepara.replace(found,newstring);
  }
  });
&#13;
.bolded{font-weight:bold;}
&#13;
<input type="text" id="thetext" />
<div id="thepara">It was a nice sunny day in the suburbs of South East London</div>
&#13;
&#13;
&#13;