英文:
Change piece of text using script
问题
I'm trying to change only the word Phone: in the second last line to Tel. in the following code block. The 123-456-7890 would stay after the change. I've tried this different ways and nothing works. Can someone provide me with a JavaScript or jQuery script to do that? Here is the code block.
After the script runs, the resulting HTML would be:
Thank you for your advice!
I've tried:
But I don't want to replace all of the <p>, just a piece of it.
英文:
I'm trying to change only the word Phone: in the second last line to Tel. in the following code block. The 123-456-7890 would stay after the change. I've tried this different ways and nothing works. Can someone provide me with a JavaScript or jQuery script to do that? Here is the code block.
<div class="staffdirectory imagebase section">
<div class="staff_member">
<div class="staff_photo nophoto"></div>
<div class="staff_name nophoto-name">
<p><span class="staff_name_bolded">Lname, Fname</span></p>
<p><span>IT Department</span></p></div>
<div class="staff_contact nophoto-contact">
<p>123 Building Center</p>
<p>Phone: 123-456-7890</p>
</div><div class="clear_all"></div></div>
After the script runs, the resulting HTML would be:
<div class="staffdirectory imagebase section">
<div class="staff_member">
<div class="staff_photo nophoto"></div>
<div class="staff_name nophoto-name">
<p><span class="staff_name_bolded">Lname, Fname</span></p>
<p><span>IT Department</span></p></div>
<div class="staff_contact nophoto-contact">
<p>123 Building Center</p>
<p>Tel. 123-456-7890</p>
</div><div class="clear_all"></div></div>
Thank you for your advice!
I've tried:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#demo').text('The replaced text.');
});
</script>
<div id="demo">
<p>The initial text</p>
</div>
But I don't want to replace all of the <p>, just a piece of it.
答案1
得分: 1
使用 :contains() 选择器来查找包含 Phone: 的 <p> 元素并进行替换。
$(".staff_contact p:contains(Phone:)").text(function(i, text) {
return text.replace('Phone:', 'Tel:');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="staffdirectory imagebase section">
<div class="staff_member">
<div class="staff_photo nophoto"></div>
<div class="staff_name nophoto-name">
<p><span class="staff_name_bolded">Lname, Fname</span></p>
<p><span>IT Department</span></p>
</div>
<div class="staff_contact nophoto-contact">
<p>123 Building Center</p>
<p>Phone: 123-456-7890</p>
</div>
<div class="clear_all"></div>
</div>
</div>
英文:
Use the :contains() selector to find the <p> that has Phone: and perform the replacement.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(".staff_contact p:contains(Phone:)").text(function(i, text) {
return text.replace('Phone:', 'Tel:');
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="staffdirectory imagebase section">
<div class="staff_member">
<div class="staff_photo nophoto"></div>
<div class="staff_name nophoto-name">
<p><span class="staff_name_bolded">Lname, Fname</span></p>
<p><span>IT Department</span></p>
</div>
<div class="staff_contact nophoto-contact">
<p>123 Building Center</p>
<p>Phone: 123-456-7890</p>
</div>
<div class="clear_all"></div>
</div>
<!-- end snippet -->
答案2
得分: 0
我在所有包含电话号码的 <p> 元素中添加了 class="PhoneNumber"，然后对它们运行了一个简单的替换脚本，如下所示：
collection = document.getElementsByClassName("PhoneNumber")
Array.from(collection).forEach(element => {
string = element.innerText.replaceAll("Phone:", "Tel:")
element.innerText = string
})
英文:
I added a class="PhoneNumber" to all <p> that contain a phone number and then run a simple replace script on them as follows
collection = document.getElementsByClassName("PhoneNumber")
Array.from(collection).forEach(element => {
string = element.innerText.replaceAll("Phone:", "Tel:")
element.innerText = string
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论