Javascript/JQuery Regex仅在链接中删除空格，括号，句点和减号

Question

由于大量的搜索，我已经走到了这一步，但我坚持只格式化链接而不是文本。 我希望链接在文本中包含数字，但没有空格、括号、句点或减号，并保持文本原样。 该链接应作为示例<a href="tel:[phone]">555 123-1234</a>

<div id="phonedirectory">
<ul>
<li>Phone 1 - 555 123-1234</li>
<li>Phone 2 - 555.123.4321</li>
<li>Phone 3 - [phone]</li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
var regex = /(?d{3})?[-.s]d{3}[-.s]d{4}/g;
var text = $("body:first").html();
text = text.replace(regex, "<a href="tel:+1$&">$&</a>");
$("body:first").html(text);
});
//]]>
</script>

有人有什么想法吗？

Answer 1

无论你做什么，都不要(！)正则表达式替换页面的整个HTML。曾。这是自找麻烦。

正确的方法更复杂。但作为回报，它是...井。。。正确。

var phonePattern = /(?d{3})?[-.s]d{3}[-.s]d{4}/g,
phoneReplacement = '<a href="tel:+1$&">$&</a>';
function replacePhoneNumbers(container) {
$(container).contents(":not(a)").each(function () {
var $this = $(this);
if (this.nodeType === 3) {
$(this).replaceWith( $this.text().replace(phonePattern, phoneReplacement) );
} else {
return replacePhoneNumbers(this);
}
});
}
$(function () {
replacePhoneNumbers(document.body);
});

该函数是递归的。它会检查您提供给它的整个容器(在这种情况下document.body)，并专门替换文本节点(nodeType === 3)，但前提是它们还不是链接的一部分。

这样，仅处理文档中需要处理的部分。文档的其余部分保持不变。不会发生重新呈现，不会更改布局，并且不会在弄乱正则表达式时破坏文档树。

---

如果你愿意，你甚至可以把它滚到jQuery插件中。

$.fn.extend({
phonelinkify: function (pattern, replacement) {
return this.contents().each(function () {
var $this = $(this);
if (this.nodeType === 3 && $this.parents("a").length === 0) {
$(this).replaceWith( $this.text().replace(pattern, replacement) );
} else {
return $(this).phonelinkify(pattern, replacement);
}
});
}
});

和

$(function () {
$("#phonedirectory").phonelinkify(/(?d{3})?[-.s]d{3}[-.s]d{4}/g, '<a href="tel:+1$&">$&</a>');
});

---

若要进行更自定义的替换，请将phoneReplacement变量更改为函数。

phoneReplacement = function (num) {
return '<a href="tel:' + num.replace(/D/g, "") + '">' + num + '</a>';
};

这将把Phone 3 - [phone]变成

Phone 3 - <a href="tel:[phone]">[phone]</a>

这适用于此答案的原始版本和插件版本。阅读.replace()以了解将函数作为替换传递的工作原理。

---

免责声明：这里使用的正则表达式是否完全适合电话号码匹配(我非常怀疑它们是否)超出了本答案的范围。

Answer 2

老实说，我会在不使用正则表达式的情况下执行此操作。

var numOnly = function (inputString) {
var validChars = "0123456789";
var outputString = '';
var len = inputString.length;
for (var i = 0; i < len; i++) {
if (validChars.indexOf(inputString[i]) > -1) {
outputString += inputString[i];
}
}
return outputString;
}
var phoneNumber = numOnly(phoneNumberString);

Answer 3

你想这样做吗？

$('li').html(function (i, html) {
var text = html.split(' - ').slice(1).join(' - '),
num = text.match(/d+/g).join('');
return '<a href="tel:+1' + num + '">' + text + '</a>';
});