使用正则表达式替换innerHTML文本时的性能问题
在使用正则表达式调用替换innerHTML文本的方法时，我面临着性能问题：
function getReplacedText(textToReplace) {
return textToReplace.replace(/\<img src=[\"|\']([\S\s]+\\)*([\S\s]+).png[\"|\']\/\>/i,"*$2*");
}此替换背后的目标是在键控处理函数中检索contentEditable div的innerHTML，并将每个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回答 3
Stack Overflow用户
发布于 2019-07-04 08:08:27
避免使用正则表达式来解析HTML。改为使用DOMParser -找到<img>标记，并将其替换为仅包含源的最后一部分的文本节点：
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);
Stack Overflow用户
发布于 2019-07-04 08:34:39
你不需要DOM来解析html标签！
最快的方法，而且不会被可能格式错误的html卡住。
查找
/<img(?=\s)(?=(?:[^>"']|"[^"]*"|'[^']*')*?\ssrc\s*=\s*(?:(['"])(?:(?!\1)[\S\s])*?((?:(?!\1|\\)[\S\s])*?)\.png\s*\1))\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]?)+>/
替换*$2*
https://regex101.com/r/bCYXV1/1
解释
# Begin 'img' tag
< img
(?= \s )
(?= # Asserttion (a pseudo atomic group)
(?: [^>"'] | " [^"]* " | ' [^']* ' )*?
\s src \s* = \s* # src attribute
(?:
( ['"] ) # (1), Quote
(?:
(?! \1 )
[\S\s]
)*?
( # (2 start)
(?:
(?! \1 | \\ )
[\S\s]
)*?
) # (2 end)
\.png # find the 'png' file
\s*
\1
)
)
# Have the png file, just match the rest of tag
\s+
(?: " [\S\s]*? " | ' [\S\s]*? ' | [^>]? )+
> # End img tag
var input = "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";
console.log(input.replace(/<img(?=\s)(?=(?:[^>"']|"[^"]*"|'[^']*')*?\ssrc\s*=\s*(?:(['"])(?:(?!\1)[\S\s])*?((?:(?!\1|\\)[\S\s])*?)\.png\s*\1))\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]?)+>/g
,"\n*$2*"));
Stack Overflow用户
发布于 2019-07-04 07:57:01
我的猜测是，也许s模式上的这个简单表达式可能会简单地完成这里的工作：
<img src=["']\s*(\S+.png)\s*["']\s*>或者如果我们没有捕捉到图像，
<img src=["']\s*\S+.png\s*["']\s*>就足够了。
https://stackoverflow.com/questions/56879058
复制相似问题
腾讯云开发者
