Question

我需要在页面上找到电话号码并在电话号码后附加图片。

我这样做了

 $("body:first").each(function(){
 // Create a REGEX Expression to detetc a phone number
 var regex =/\+\d{0,3}[-.\s]?\(?\d?\)?[-.\s]?\s?\d{1,4}[-.\s]?\d{1,9}[-.\s]?\d{5}/g;
 var text = $(this).html();
text = text.match(regex).after('<img src="https://callhippo.com/dist/img/favicon_callhippo.png"/>');
$("body:first").html(text);
});

Answer 1

您可以尝试这种方法：

＆＃13;

const regex = /(\+\d{0,3}[-.\s]?\(?\d?\)?[-.\s]?\s?\d{1,4}[-.\s]?\d{1,9}[-.\s]?\d{5})/g;
const str = `abcd +8801917308239 pqrs hijk`;
const subst = `$1 <img src="https://callhippo.com/dist/img/favicon_callhippo.png"/>`;

const result = str.replace(regex, subst);
console.log(result);

＆＃13;

Answer 2

除了正则表达式匹配失败之外，以下代码具有所需的行为。您的代码失败，因为您没有阅读任何功能的文档。 .each()遍历所有匹配元素。 body只应出现在您的文档中，因此您不需要:first。而是迭代p或其中包含文本的任何内容。下一个.after()应该在另一个DOM之后插入一个DOM（或其中的任何内容）。你要求它在一串字符串之后插入一个dom。这就是为什么你得到一个未定义的错误调用.after（）。现在，如果没有匹配项，match()将为您提供null，因此您需要确保它在执行任何其他操作之前不为null。我把它用电话号码替换为电话号码。

当然，match()仍然会抛出null，所以现在代码不能进行替换，但这是因为dom中的文本与正则表达式不匹配。

＆＃13;

$("body p").each(function(){
 // Create a REGEX Expression to detetc a phone number
 re = /^.+/ //placeholder for correct regex expression
 var text = $(this).html();
 var nums = re.exec(text); //this doesn't match because of your regex
 if(nums != null){
    $(this).after('<img src="https://callhippo.com/dist/img/favicon_callhippo.png"/>');
 
    //$(this).html(nums.implode(",")); would replace the line with all the phone numbers
}

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>
    <p>My number is 555-555-5555</p>
    <p>111-111-1111 is a cool phone number</p>
  </div>
</body>

＆＃13;

Jquery：如何查找电话号码文本并在电话号码文本后附加图像

2 个答案: