Question

我的目标是遍历一组给定的元素，并用链接Regex替换内部HTML，这样我就可以将http://*.*/*形式的HTML文本转换为<a href="http://*.*/*" target="_blank">http://*.*/*</a>

所以我运行了一些vanilla javascript：

for (var i = 0; i < document.getElementsByClassName('title').length; i++) {
    var title = document.getElementsByClassName('title')[i]
    title.innerHTML = title.innerHTML.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,"<a target='_blank' href='$1'>$1</a>")
}

这只是我正在使用的RegExp：

/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

那么，为什么这个循环会导致浏览器挂起？循环文本不超过256个字符，通常有5到30个.title个元素，绝对不是崩溃/挂起浏览器的数据级别。我只在Chrome / Safari中体验过它，不确定它是否发生在Firefox / Opera中。

Answer 1

尝试存储结果。

var titles = document.querySelectorAll(".title");
// querySelectorAll is supported in slightly more browsers than getElementsByClassName
var l = titles.length, i, title;
for( i=0; i<l; i++) {
    title = titles[i];
    title.innerHTML = title.innerHTML.replace(/..../,'....');
}

如果挂起继续，可能是因为正则表达式匹配了您已经替换过的东西。尝试添加否定前瞻，以确保在匹配的URL之后没有单引号。 (?=!')

带有RegEx的Javascript .replace（）会导致浏览器挂起/崩溃

1 个答案: