动态替换字符串，最佳方法是什么？

Question

我正在尝试通过用span包围文本来实时替换一些文本。

例如：

有个人在打字，当他们输入单词“backwards”和它后面的空格时，会使包含该单词的整个句子或行变为加粗。

现在我已经设置了一个CSS类，我一直在尝试将其放入span中，但我不确定是否有效...它还会在发生任何新事情时重置，所以光标跳回开头，不让我前进。

以下是我目前拥有的（我的正则表达式现在也是错误的）：

function replace(e) {
  if (e.keyCode == 13) {
    element = document.getElementById("script");
    rg = /^INT/;
    element.innerHTML = element.innerHTML.replace(
      rg,
      '<span id="bold">$1</span>'
    );
  };
};

<div contenteditable="true" id="script" style="width: 100%; height: 500px; border: 1px solid black;" onkeydown="replace(event)">
  Replace
</div>

- TyLeisher

---

你的正则表达式使用了 ^，因此在字符串开头查找 INT。通过将其括在括号中来捕获 INT。你的替换函数现在只有在返回后才会触发。这是有意为之吗？ - Mouser

Answer 1

正如 @Mouser 所提到的，你的正则表达式将在开头查找 INT 字符串。

这是正确的代码。你只需要根据自己的需要修复你的正则表达式即可。我已经测试过了，它可以工作。

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)
  };
};

- Harpreet Singh

---

$1在原始代码中是正确的。这将会产生错误。@HarpreetSingh - Mouser

在替换中使用匿名函数是不必要的：'<h1><span id="bold">$1</span></h1>' 应该足够作为替换字符串。 - Mouser

@Mouser，实际上我不熟悉那种方法。 - Harpreet Singh

Answer 2

可能有更好的方法来实现，但是类似这样的代码可能会有帮助

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);
  }
  });

.bolded{font-weight:bold;}

<input type="text" id="thetext" />
<div id="thepara">It was a nice sunny day in the suburbs of South East London</div>

- Billy