javascript - 使用正则表达式替换 innerHTML 文本时的性能问题

Question

调用使用正则表达式替换 innerHTML 文本的方法时，我遇到了性能问题:

function getReplacedText(textToReplace) {
  return textToReplace.replace(/\<img src=[\"|\']([\S\s]+\\)*([\S\s]+).png[\"|\']\/\>/i,"*$2*");
}

此替换背后的目标是检索 innerHTML的 contentEditable div在 keyup 处理函数中，并替换每个 img带有文件名的标签。就我而言，此替换是必要的，以了解替换的文本是否超过可编辑 div 允许的最大长度。

function keyupHandler(event) {
  var myEditableDiv = document.getElementById("editableDiv");
  const currentText = getReplacedText(myEditableDiv.innerHTML);
  if (currentText.length >= 750) { //750 is the max length
    event.preventDefault();
  }
}

例如，abc <img src="assets\test\1F619.png"> def 的所需输出将是 abc *1F619* def

当我不使用 getReplacedText 时我没有任何性能问题。你能告诉我更好的方法或更好地使用正则表达式吗？

这是性能开始下降时要替换的文本示例:

dsd<img src="assets\test\1F619.png"/><img src="assets\test\1F619.png"/><img src="assets\test\1F629.png"/><img src="assets\test\1F630.png"/>sdfsdfsdffsdf<img src="assets\test\1F629.png"/>sdfsdsdfsdf<img src="assets\test\1F627.png"/><img src="assets\test\1F631.png"/>sdfsdfsdf<img src="assets\test\1F631.png"/>sdfsdfsdf<img src="assets\test\1F632.png"/>sdfsdfs<img src="assets\test\1F629.png"/><img src="assets\test\1F629.png"/>sdfs<img src="assets\test\1F631.png"/>df<img src="assets\test\1F632.png"/>sdfsdfsdf

Answer 1

避免使用正则表达式来解析 HTML。使用 DOMParser相反 - 找到 <img>标签，并将它们替换为仅包含 src 最后一部分的文本节点:

const input = String.raw`dsd<img src="assets\test\1F619.png"><img src="assets\test\1F619.png"><img src="assets\test\1F629.png"><img src="assets\test\1F630.png">sdfsdfsdffsdf<img src="assets\test\1F629.png">sdfsdsdfsdf<img src="assets\test\1F627.png"><img src="assets\test\1F631.png">sdfsdfsdf<img src="assets\test\1F631.png">sdfsdfsdf<img src="assets\test\1F632.png">sdfsdfs<img src="assets\test\1F629.png"><img src="assets\test\1F629.png">sdfs<img src="assets\test\1F631.png">df<img src="assets\test\1F632.png">sdfsdfsdf`;
const doc = new DOMParser().parseFromString(input, 'text/html');
doc.querySelectorAll('img[src]').forEach((img) => {
  img.replaceWith(' ' + img.src.match(/[^\/]+(?=\.png$)/)[0] + ' ');
});
console.log(doc.body.innerHTML);