Substituting Specific Content on a Webpage

I need to update a specific phone number within a paragraph without accessing the code inside the body myself. It has been provided by our partner and I am unable to modify it directly.

If you would like to explore different options, please reach out to a lodging specialist at 866.264.1842.

My attempted solution was:

$("body").html(
    $("body").html().replace(/866.264.1842/g,'888.888.4754') );

Although this method successfully changed the phone number, it caused issues with other aspects of our page such as the calendar picker. Is there a CSS-only solution to achieve this task since I have access to the CSS but not the JS running on the page?

javascriptjqueryhtmlcss

Answer №1

If the phone number is located within a div with the ID "contact", you can follow these steps:

$("#contact").html($("#contact").html().replace(/866.264.1842/g,'888.888.4754'))

This method ensures that the DOM changes made by your calendar picker JavaScript code remain intact.

Answer №2

I have modified a function to help address this issue, hopefully it will solve your problem

function updateTextContent(str, newText) {
    $('body:contains(' + str + ')').contents().each(function() {
        if (this.nodeType == 3) {
            $(this).parent().html(function(_, oldContent) {
                return oldContent.replace(RegExp(str, "g"), newText);
            })
        }
    });
}


// Implementation
updateTextContent("866.264.1842", "888.888.4754");

Test it out on this jsFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Permit the input of HTML code within the text area

I'm not sure if I'm searching for the right thing on Google or Stackoverflow, but here's what I'm trying to do- I have a text area in a form and I want users to be able to input HTML tags. So the user would enter something like this i ...

javascriptphpjqueryhtmltags

The significance of order when evaluating 2 Date Objects

While working with Date objects, I encountered something peculiar. When comparing two Date objects - let's call them a and b, the expressions a > b and b < a yield different results. Check out this JSFiddle for an example. var u = Date(2014,7, ...

javascript

Is it possible to return an empty array within an HttpInterceptor when encountering an error?

When encountering errors that require displaying empty "lists" in dropdowns, I utilize this interceptor: public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(request).pipe(catchEr ...

javascriptangulartypescript

Is there a Safari glitch related to floating elements?

I stumbled upon a strange issue with the layout I've been working on, and it led me to this concise code snippet that seems to be causing misrendering in desktop Safari. It appears that the div#shim element is what's triggering the text misrender ...

htmlcsssafaricss-float

Error: The variable "$this" has not been defined in the AJAX function

Recently, I've been delving into the world of javascript and ajax. I'm trying to create a dynamic select option list similar to this: https://i.sstatic.net/qELIf.png However, when attempting to compile using Google Chrome Developer tools (F12), ...

javascriptphpmysqlajaxcodeigniter

Issue-free AJAX call to Neo4j database on local server with no 'Access-Control-Allow-Origin' problem

I'm currently working on a basic JavaScript AJAX request to connect from a MAMP server running at localhost:8888 to a Neo4j database running on localhost:7474. The issue I'm encountering is the following error message: XMLHttpRequest cannot l ...

javascriptajaxneo4j

If the template variable is empty, the nesting HTML element should be hidden

Check out my awesome template: <li><a href="/{{ user_data.room2 }}" id="room2">/{{ user_data.room2 }}</a></li> <li><a href="/{{ user_data.room3 }}" id="room3">/{{ user_data.room3 }}</a></li> < ...

pythonhtmldjango

Building a search form using Vue.js with query parameters

Incorporating Vue.js 2.6 with the vue-router component has been quite a journey for me. My search form setup looks like this: <form class="search-form" @submit.prevent="search"> <div class="form-group"> <input type="text" class= ...

javascriptvue.js

Is it feasible to implement Building Information Modeling in AngularJS or Laravel?

Is there a way to implement a feature in AngularJS or Laravel that enables the opening of BIM files? Your response would be greatly appreciated. ...

javascriptangularjslaravel-5bim

Is there a way to properly validate the innerText of a multiline form field in SharePoint?

I'm facing an issue with a code snippet related to my problem. The output from console.log(field1[0].innerText); seems correct, but the if statement validation is always resulting in false. I've attempted various types of string validations like ...

javascriptjquerysharepoint

The textarea field activates a select event listener whenever a button or link is clicked within the DOM

My DOM structure is pretty straightforward, consisting of a textarea, some buttons, and links. I've attached a select eventlistener to the textarea to monitor text selection by the user. const summary = document.getElementById("summary"); summary?. ...

javascripthtmlevent-listener

Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

I'm having an issue with customizing a video player in HTML5. When I press play on the top video, it automatically plays both videos on the page simultaneously. For reference, here is my code on jsfiddle: http://jsfiddle.net/BannerBomb/U4MZ3/27/ Bel ...

javascripthtmlcssvideo-player

What is the process of combining two class elements?

In my JavaScript class practice, I'm working on creating two users, each equipped with a weapon. My goal is to have a function within the class that allows the players to attack each other and decrease their health based on the damage of their respect ...

javascript

Detecting when a specific element triggers a key press event

Hello everyone, As a newcomer to jQuery, I have a question regarding the key press event: Within DIV 1 area Inside DIV 2 area In DIV 3 area Unlike the click event, determining which element triggered the keypress event is chall ...

jquerydomkeypress

What are the steps for transitioning with JavaScript?

My goal is to make both the <hr> elements transition, but I'm struggling with only being able to select the lower <hr> using CSS. html { margin-bottom: 0; height: 100%; min-height: 100%; } body { margin-top: 0; height: 100%; ...

javascripthtmlcss

Exploring Cross Origin Policy Restrictions with Fiddler for JSON Debugging

In the process of creating a modern webapp using JSON data, I came across a helpful blog post about using Fiddler to mock JSON data. My development setup involves working locally with Notepad++ and testing primarily on Chrome, with plans to expand to othe ...

javascriptjqueryjsongoogle-chromefiddler

Coding in Javascript is causing interference between the programs

I have a limited understanding of Javascript and Jquery, and I am seeking assistance with the following code snippet. Here is the code snippet located within the <head></head> section of my document. <script src="js/jquery.js" type="te ...

javascriptajaxjquery

"Troubleshooting a Animation Problem in the Latest Version of

I have discovered an issue with animations on the latest version of Firefox Quantum. Upon loading a page with certain animated elements set to display: none;, when a script changes it to .display = "block";, some parts of the animation may be missed or no ...

javascriptcssfirefoxfirefox-quantum

Unable to activate tr:hover override feature in Dash app

Although I am new to Dash, I am well-versed in Python, HTML, and CSS. I have a simple structure that displays a DataTable. Here is the code snippet: def render_datatable(df=None, id=None): dt1= dash_table.DataTable( id=id, columns=[{&q ...

cssplotly-dash

Round up all the hyperlinks within a paragraph and organize them neatly into a list

Let me present a scenario: <p class="links">Lorem <a href="#">diam</a> nonummy nibh <a href="#">Lorem</a></p> Following that, I have a lineup: <ul class="list"> </ul> How do I achieve this using jQuery? ...

javascriptjqueryhtmlmarkup